/* ==========================================================================
   DNJ SILVER - LUXURY JEWELRY DESIGN SYSTEM (MESSENGER PRICE QUOTE CATALOG)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cinzel:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Color Palette - Logo Matched Luxury Warm Cream & Espresso Bronze */
  --color-primary: #3D3024;
  /* Deep Espresso Bronze (Logo Diamond Color) */
  --color-secondary: #4A3B2C;
  /* Warm Dark Mocha */
  --color-accent-gold: #A38B6B;
  /* Warm Luxury Champagne Bronze */
  --color-accent-gold-hover: #8C7355;
  --color-accent-silver: #E2D9C8;
  /* Soft Warm Silk Beige */

  /* Brand Social Colors */
  --color-messenger: #0084FF;
  /* Facebook Messenger Blue */
  --color-messenger-hover: #0066cc;
  --color-zalo: #0068FF;
  /* Zalo Secondary Blue */
  --color-zalo-hover: #0052cc;

  --color-bg-main: #F7F4EB;
  /* Logo Warm Silk Cream Background */
  --color-bg-surface: #FFFFFF;
  /* Clean Surface White */
  --color-bg-alt: #EFEBE0;
  /* Soft Cream Contrast */

  --color-text-main: #3D3024;
  /* Primary Text Espresso */
  --color-text-muted: #786856;
  /* Subtitle Muted Bronze */
  --color-text-light: #A39685;

  /* Typography - Ultra Luxury Jewelry Branding */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 10px rgba(61, 48, 36, 0.05);
  --shadow-md: 0 8px 24px rgba(61, 48, 36, 0.08);
  --shadow-lg: 0 16px 40px rgba(61, 48, 36, 0.12);
  --shadow-gold: 0 4px 20px rgba(163, 139, 107, 0.3);
  --shadow-messenger: 0 4px 20px rgba(0, 132, 255, 0.35);

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* --- BASE STYLES --- */
html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
  padding-top: 96px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.font-serif {
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
  font-weight: 700;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

/* BUTTON TEXT HELPER SPANS */
.btn-text-desktop {
  display: inline;
}

.btn-text-mobile {
  display: none;
}

/* PREVENT UNNATURAL TEXT WRAPPING ACCROSS BUTTONS & LABELS */
.nowrap,
.dnj-category-nav li a,
.btn-messenger-header,
.btn-zalo-header,
.dnj-tab-btn,
.dnj-sku-badge,
.dnj-cat-badge,
.dnj-btn-messenger-order,
.dnj-btn-zalo-sub,
.dnj-price-quote-badge {
  white-space: nowrap !important;
}

/* --- TOP ANNOUNCEMENT BAR & FIXED HEADER --- */
.dnj-fixed-header-group {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dnj-topbar {
  background: linear-gradient(90deg, #251D14 0%, #3D3024 50%, #251D14 100%);
  color: #F7F4EB;
  font-size: 0.78rem;
  padding: 8px 16px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(163, 139, 107, 0.45);
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.dnj-topbar-desktop {
  display: inline-block;
}

.dnj-topbar-mobile {
  display: none;
}

.dnj-topbar span.gold {
  color: #E6C587;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- HEADER & NAVIGATION --- */
.dnj-header-sticky {
  position: relative;
  background: rgba(247, 244, 235, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid rgba(163, 139, 107, 0.35);
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 24px -2px rgba(61, 48, 36, 0.08);
}

.dnj-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  gap: 16px;
  box-sizing: border-box;
}

.dnj-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.dnj-logo img {
  height: 42px;
  width: 42px;
  border-radius: 10px;
  border: 1.5px solid #A38B6B;
  box-shadow: 0 2px 12px rgba(163, 139, 107, 0.3);
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dnj-logo:hover img {
  transform: scale(1.06);
}

.dnj-logo-text {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: #3D3024;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.dnj-logo-text span.sub {
  font-family: var(--font-sans);
  color: #8C7355;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
}

/* 4 CATEGORIES NAV LINKS */
.dnj-category-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dnj-category-nav li a {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: #3D3024;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 18px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(163, 139, 107, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

.dnj-category-nav li a:hover,
.dnj-category-nav li a.active {
  color: #3D3024;
  background: linear-gradient(135deg, #FFFDF5 0%, #F5ECDB 100%);
  border-color: rgba(163, 139, 107, 0.6);
  box-shadow: 0 4px 14px rgba(163, 139, 107, 0.22);
}

/* HEADER CONTACT ACTION BUTTONS */
.dnj-header-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-messenger-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0072FF 0%, #00C6FF 100%);
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(0, 114, 255, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-messenger-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 114, 255, 0.5);
  color: #FFFFFF !important;
}

.btn-zalo-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 104, 255, 0.08);
  color: #0068FF !important;
  padding: 9px 18px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap !important;
  border: 1px solid rgba(0, 104, 255, 0.25);
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-zalo-header:hover {
  background: #0068FF;
  color: #FFFFFF !important;
  border-color: #0068FF;
  transform: translateY(-1px);
}

.mobile-menu-btn {
  display: none;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.15rem;
  color: #0F172A;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
  background: #0F172A;
  color: #D4AF37;
  border-color: #0F172A;
}

/* --- MOBILE DRAWER MENU --- */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100vh;
  background: var(--color-primary);
  color: #FFF;
  z-index: 2000;
  transform: translateX(-100%);
  visibility: hidden;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease, box-shadow 0.35s ease;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.mobile-drawer.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1999;
  display: none;
}

.mobile-drawer-overlay.open {
  display: block;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: #FFF;
  font-size: 1.4rem;
  cursor: pointer;
}

.drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-nav li a {
  color: #E2E8F0;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.drawer-nav li a:hover,
.drawer-nav li a.active {
  background: var(--color-accent-gold);
  color: #FFF;
}

/* --- HERO SECTION --- */
.dnj-hero-section {
  position: relative;
  background: linear-gradient(135deg, #F7F4EB 0%, #EFEBE0 50%, #F5EFE3 100%);
  color: #3D3024;
  padding: 32px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(163, 139, 107, 0.25);
}

.dnj-hero-content {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 32px;
}

.dnj-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(163, 139, 107, 0.16) 0%, rgba(140, 115, 85, 0.08) 100%);
  color: #8C7355;
  border: 1px solid rgba(163, 139, 107, 0.4);
  padding: 5px 14px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(163, 139, 107, 0.1);
}

.dnj-hero-text h1 {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #3D3024;
  letter-spacing: 0.01em;
}

.dnj-hero-text p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: #5C4A38;
  margin-bottom: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.dnj-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dnj-btn-messenger-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0072FF 0%, #00C6FF 100%);
  color: #FFFFFF !important;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0, 114, 255, 0.3);
  transition: var(--transition-smooth);
}

.dnj-btn-messenger-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 114, 255, 0.45);
  color: #FFF !important;
}

.dnj-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3D3024;
  color: #F7F4EB !important;
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1.5px solid #A38B6B;
  box-shadow: 0 4px 14px rgba(61, 48, 36, 0.15);
  transition: var(--transition-smooth);
}

.dnj-btn-gold:hover {
  background: #8C7355;
  border-color: #8C7355;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140, 115, 85, 0.3);
}

.dnj-hero-img-wrapper {
  text-align: center;
}

.dnj-hero-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(61, 48, 36, 0.18);
  border: 1px solid rgba(163, 139, 107, 0.3);
}

/* --- SECTION HEADERS --- */
.dnj-section {
  padding: 40px 20px;
  max-width: 1320px;
  margin: 0 auto;
}

.dnj-section-header {
  text-align: center;
  margin-bottom: 28px;
}

.dnj-section-subtitle {
  color: #8C7355;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.dnj-section-title {
  font-size: 2.6rem;
  color: #3D3024;
  margin: 0 0 8px 0;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

.dnj-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto 0 auto;
}

.dnj-section-divider span {
  position: relative;
  font-size: 0.85rem;
  color: #A38B6B;
  letter-spacing: 0.22em;
  padding: 0 18px;
}

.dnj-section-divider span::before,
.dnj-section-divider span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 75px;
  height: 1.5px;
}

.dnj-section-divider span::before {
  right: 100%;
  background: linear-gradient(90deg, transparent, #A38B6B);
}

.dnj-section-divider span::after {
  left: 100%;
  background: linear-gradient(90deg, #A38B6B, transparent);
}

/* 4 CATEGORIES GRID CARDS */
.dnj-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dnj-category-card {
  position: relative;
  height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  border: 1px solid rgba(163, 139, 107, 0.3);
}

.dnj-category-card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dnj-category-card:hover .dnj-category-card-bg {
  transform: scale(1.08);
}

.dnj-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(30, 23, 16, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  color: #FFF;
}

.dnj-cat-badge {
  align-self: flex-start;
  background: #A38B6B;
  color: #FFF;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap !important;
}

.dnj-cat-title {
  color: #FFFFFF;
  font-size: 1.8rem;
  margin: 0 0 6px 0;
  font-family: var(--font-serif);
  font-weight: 700;
  white-space: nowrap;
}

.dnj-cat-desc {
  color: #CBD5E1;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  margin-bottom: 14px;
  font-weight: 300;
  line-height: 1.4;
}

.dnj-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E6C587;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap !important;
  transition: var(--transition-fast);
}

.dnj-category-card:hover .dnj-cat-link {
  gap: 12px;
  color: #FFF;
}

/* --- TAB FILTERS --- */
.dnj-tab-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.dnj-tab-btn {
  background: #FFF;
  border: 1px solid rgba(163, 139, 107, 0.35);
  padding: 11px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #3D3024;
  cursor: pointer;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(61, 48, 36, 0.04);
}

.dnj-tab-btn:hover {
  background: #F5ECDB;
  color: #3D3024;
  border-color: #A38B6B;
  transform: translateY(-1px);
}

.dnj-tab-btn.active {
  background: #3D3024;
  color: #F7F4EB;
  border-color: #A38B6B;
  box-shadow: 0 6px 20px rgba(61, 48, 36, 0.3), 0 0 15px rgba(163, 139, 107, 0.25);
}

/* --- PRODUCT GRID & CARDS --- */
.dnj-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.dnj-product-card {
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(61, 48, 36, 0.06);
  border: 1px solid rgba(163, 139, 107, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.dnj-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(61, 48, 36, 0.14), 0 0 30px rgba(163, 139, 107, 0.25);
  border-color: rgba(163, 139, 107, 0.65);
}

.dnj-product-img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  background: #F8FAFC;
  cursor: pointer;
}

.dnj-product-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dnj-product-card:hover .dnj-product-img {
  transform: scale(1.08);
}

/* PRODUCT SKU BADGE */
.dnj-sku-badge {
  display: none !important;
}

.dnj-product-content {
  padding: 16px 14px 16px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dnj-product-category {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: #8C7355;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.dnj-product-code-title {
  font-size: 1.25rem;
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 14px 0;
  white-space: nowrap;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dnj-product-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.dnj-product-title-link:hover .dnj-product-code-title {
  color: #8C7355;
  transition: color 0.2s ease;
}

.dnj-btn-gold-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #3D3024;
  color: #F7F4EB !important;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap !important;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1.5px solid #A38B6B;
  box-shadow: 0 4px 14px rgba(61, 48, 36, 0.15);
  transition: var(--transition-smooth);
  text-decoration: none;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.dnj-btn-gold-card:hover {
  background: #8C7355;
  border-color: #8C7355;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* PRIMARY FACEBOOK MESSENGER ORDER BUTTON */
.dnj-btn-messenger-order {
  background: linear-gradient(135deg, #0084FF 0%, #00C6FF 100%);
  color: #FFF !important;
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap !important;
  transition: var(--transition-fast);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 132, 255, 0.3);
}

.dnj-btn-messenger-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 132, 255, 0.45);
  color: #FFF !important;
}

/* SECONDARY ZALO BUTTON */
.dnj-btn-zalo-sub {
  background: #F1F5F9;
  color: var(--color-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  padding: 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 8px;
  white-space: nowrap !important;
  transition: var(--transition-fast);
  text-decoration: none;
}

.dnj-btn-zalo-sub:hover {
  background: var(--color-zalo);
  color: #FFF !important;
  border-color: var(--color-zalo);
}

/* --- LIGHTBOX LUXURY GLASSMORPHISM MODAL REDESIGN --- */
.dnj-modal-wrapper {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 440px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(163, 139, 107, 0.25);
  border: 1.5px solid rgba(163, 139, 107, 0.5);
  max-height: 92vh;
  overflow-y: auto;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dnj-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2D2319;
  color: #E6C587 !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: all 0.25s ease;
}

.dnj-modal-close-btn:hover {
  background: #E11D48;
  border-color: #E11D48;
  color: #FFFFFF !important;
  transform: rotate(90deg) scale(1.08);
}

.dnj-modal-img-container {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1.5px solid rgba(163, 139, 107, 0.4);
  background: linear-gradient(135deg, #1A140E 0%, #2B2117 100%);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dnj-modal-img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform 0.4s ease;
  -webkit-touch-callout: default !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

.dnj-modal-img-container:hover img {
  transform: scale(1.04);
}

/* LIGHTBOX MODAL PREV/NEXT NAVIGATION BUTTONS */
.dnj-modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(37, 29, 20, 0.88);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 10;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

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

.dnj-modal-nav-btn:focus,
.dnj-modal-nav-btn:focus-visible,
.dnj-modal-nav-btn:active {
  outline: none;
  background: rgba(37, 29, 20, 0.88);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.dnj-modal-nav-btn:hover {
  background: #A38B6B;
  border-color: #A38B6B;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(163, 139, 107, 0.5);
}

/* LUXURY SKU BADGE PILL & COUNTER */
.dnj-modal-sku-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.dnj-modal-sku-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2D2319 0%, #1E1710 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  padding: 8px 22px;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-family: var(--font-sans) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

.dnj-sku-counter {
  color: #E6C587;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid rgba(212, 175, 55, 0.4);
  letter-spacing: 0.05em;
}

.dnj-modal-sku-pill .dnj-sku-icon {
  color: #E6C587;
  font-size: 0.95rem;
}

.dnj-modal-sku-pill .dnj-sku-title {
  color: #C5BBB0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dnj-modal-sku-pill .dnj-sku-value {
  color: #FFFFFF;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: var(--font-display) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

.dnj-modal-actions-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.dnj-btn-messenger-modal {
  background: linear-gradient(135deg, #0072FF 0%, #00C6FF 100%);
  color: #FFFFFF !important;
  border: none;
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  white-space: normal !important;
  text-align: center;
  line-height: 1.35;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 114, 255, 0.38);
}

.dnj-btn-messenger-modal i {
  font-size: 1.25rem;
}

.dnj-btn-messenger-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 255, 0.52);
  color: #FFFFFF !important;
}

.dnj-btn-download-modal {
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  color: #FFFFFF !important;
  border: none;
  width: 100%;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  white-space: normal !important;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}

.dnj-btn-download-modal i {
  font-size: 1.15rem;
}

.dnj-btn-download-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
  filter: brightness(1.08);
  color: #FFFFFF !important;
}

/* --- DUAL FLOATING CHAT BUBBLES WIDGET --- */
.dnj-messenger-widget-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.dnj-chat-bubble-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dnj-chat-prompt-bubble {
  background: #FFFFFF;
  color: var(--color-primary);
  padding: 9px 15px;
  border-radius: 18px 4px 18px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 132, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: floatBounce 3s ease-in-out infinite;
}

.dnj-chat-prompt-bubble span.highlight-msg {
  color: var(--color-messenger);
  font-weight: 700;
}

.dnj-chat-prompt-bubble span.highlight-zalo {
  color: var(--color-zalo);
  font-weight: 700;
}

.dnj-chat-bubble-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  flex-shrink: 0;
}

.dnj-chat-bubble-btn.bubble-messenger {
  background: linear-gradient(135deg, #0084FF 0%, #00C6FF 100%);
  box-shadow: 0 8px 25px rgba(0, 132, 255, 0.45);
}

.dnj-chat-bubble-btn.bubble-zalo {
  background: linear-gradient(135deg, #0068FF 0%, #00A6FF 100%);
  box-shadow: 0 8px 25px rgba(0, 104, 255, 0.4);
}

.dnj-chat-bubble-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 132, 255, 0.5);
  animation: pulseRing 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.dnj-chat-bubble-btn.bubble-zalo::before {
  border-color: rgba(0, 104, 255, 0.5);
}

.dnj-chat-bubble-btn:hover {
  transform: scale(1.14);
  color: #FFF;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.18);
    opacity: 0;
  }

  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes floatBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* --- LUXURY TOAST NOTIFICATION & SHARE LINK --- */
.dnj-toast-notification {
  position: fixed;
  top: 95px;
  right: 24px;
  background: #0F172A;
  color: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.7);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 175, 55, 0.25);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: 420px;
  line-height: 1.4;
}

.dnj-toast-notification.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.dnj-toast-notification i {
  color: #D4AF37;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* PRODUCT SHARE LINK BOX IN MODAL */
.dnj-share-link-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 14px;
}

.dnj-share-link-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.76rem;
  color: #475569;
  font-family: var(--font-sans);
  outline: none;
}

.dnj-btn-copy-link {
  background: #0F172A;
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dnj-btn-copy-link:hover {
  background: #D4AF37;
  color: #0F172A;
}

/* --- BRAND VALUES BANNER --- */
.dnj-brand-values {
  background: transparent;
  padding: 24px 24px 40px 24px;
  margin-top: 0;
}

.dnj-values-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dnj-value-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(163, 139, 107, 0.25);
  box-shadow: 0 4px 14px rgba(61, 48, 36, 0.04);
  transition: transform 0.3s ease;
}

.dnj-value-item:hover {
  transform: translateY(-4px);
  border-color: #A38B6B;
}

.dnj-value-icon {
  width: 50px;
  height: 50px;
  background: #F7F4EB;
  border: 1.5px solid #A38B6B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #8C7355;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.dnj-value-text h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #3D3024;
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
}

.dnj-value-text p {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #786856;
  margin: 0;
  line-height: 1.4;
}

/* --- FOOTER --- */
.dnj-footer {
  background: #251D14;
  color: #C5BBB0;
  padding-top: 60px;
  padding-bottom: 24px;
  border-top: 3px solid #A38B6B;
}

.dnj-footer-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}

.dnj-footer-col h4 {
  color: #F7F4EB;
  font-size: 1.15rem;
  margin: 0 0 20px 0;
  font-weight: 700;
  font-family: var(--font-serif);
  letter-spacing: 0.06em;
}

.dnj-footer-col p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #C5BBB0;
}

.dnj-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dnj-footer-links li {
  margin-bottom: 10px;
}

.dnj-footer-links a {
  color: #C5BBB0;
  font-size: 0.88rem;
  transition: var(--transition-fast);
}

.dnj-footer-links a:hover {
  color: #DDAF72;
  padding-left: 4px;
}

.dnj-footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 24px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1200px) {
  .dnj-category-nav li a {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
}

@media (max-width: 1100px) {

  .dnj-categories-grid,
  .dnj-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .dnj-category-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  /* Hide header Zalo button on mobile & tablet since Zalo floating bubble exists */
  .btn-zalo-header {
    display: none !important;
  }

  .dnj-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dnj-hero-text h1 {
    font-size: 2.5rem;
  }

  .dnj-hero-text p {
    margin: 0 auto 24px auto;
  }

  .dnj-hero-actions {
    justify-content: center;
  }

  .dnj-categories-grid,
  .dnj-products-grid,
  .dnj-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dnj-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  body {
    padding-top: 66px;
  }

  /* TOPBAR COMPACT */
  .dnj-topbar {
    font-size: 0.68rem;
    padding: 4px 6px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }

  .dnj-topbar-desktop {
    display: none;
  }

  .dnj-topbar-mobile {
    display: inline-block;
  }

  /* HEADER COMPACT */
  .dnj-nav-container {
    padding: 5px 10px;
    gap: 6px;
  }

  .dnj-logo {
    gap: 5px;
  }

  .dnj-logo-text {
    font-size: 1.15rem;
    display: inline-flex;
    align-items: baseline;
  }

  .dnj-logo-text span.sub {
    font-size: 0.85rem !important;
    display: inline !important;
  }

  .dnj-logo img {
    height: 28px;
    width: 28px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.7);
    box-shadow: none;
  }

  .dnj-header-contact {
    gap: 4px;
  }

  .btn-messenger-header {
    padding: 5px 11px;
    font-size: 0.74rem;
    gap: 4px;
    border-radius: 100px;
  }

  .btn-messenger-header span {
    display: inline !important;
  }

  .mobile-menu-btn {
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
    border-radius: 6px;
    background: transparent;
    border: none;
    padding: 0;
    color: #0F172A;
  }

  /* COMPACT MOBILE SIDEBAR DRAWER MENU */
  .mobile-drawer {
    width: 240px;
    padding: 16px 14px;
  }

  .drawer-header {
    padding-bottom: 10px;
    margin-bottom: 14px;
  }

  .drawer-header .dnj-logo {
    font-size: 1.1rem !important;
  }

  .drawer-header .dnj-logo img {
    height: 26px !important;
    width: 26px !important;
  }

  .drawer-close-btn {
    font-size: 1.15rem;
  }

  .drawer-nav {
    gap: 8px;
  }

  .drawer-nav li a {
    font-size: 0.84rem;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 6px;
  }

  /* HERO & SECTION COMPACT FOR SINGLE-LINE TITLES ON MOBILE */
  .dnj-section {
    padding: 24px 10px;
  }

  .dnj-section-header {
    margin-bottom: 24px;
  }

  .dnj-section-subtitle {
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
  }

  .dnj-section-title {
    font-size: clamp(0.85rem, 4.2vw, 0.25rem) !important;
    margin-bottom: 6px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em !important;
  }

  .dnj-hero-section {
    padding: 18px 12px;
  }

  .dnj-hero-badge {
    padding: 4px 12px;
    font-size: 0.8rem;
    margin-bottom: 6px;
  }

  .dnj-hero-text h3 {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }

  .dnj-hero-text h1 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .dnj-hero-text p {
    font-size: 0.78rem;
    margin-bottom: 10px;
    line-height: 1.35;
  }

  .dnj-hero-img-wrapper {
    margin-top: 8px;
    text-align: center;
  }

  .dnj-hero-img {
    max-width: 220px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(61, 48, 36, 0.12);
  }

  .dnj-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .dnj-btn-messenger-hero,
  .dnj-btn-gold {
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap !important;
    text-align: center;
    border-radius: 100px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* BUTTON TEXT TOGGLE ON MOBILE */
  .btn-text-desktop {
    display: none !important;
  }

  .btn-text-mobile {
    display: inline !important;
  }

  /* 2-COLUMNS COMPACT GRID FOR CATEGORY & PRODUCT CARDS */
  .dnj-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dnj-category-card {
    height: 175px;
    border-radius: 12px;
  }

  .dnj-category-overlay {
    padding: 12px 10px;
  }

  .dnj-cat-badge {
    font-size: 0.62rem;
    padding: 2px 7px;
    margin-bottom: 4px;
  }

  .dnj-cat-title {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }

  .dnj-cat-desc {
    display: none !important;
  }

  .dnj-cat-link {
    font-size: 0.72rem;
  }

  .dnj-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dnj-product-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .dnj-product-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
  }

  .dnj-sku-badge {
    top: 6px;
    left: 6px;
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .dnj-product-content {
    padding: 10px 8px 12px 8px;
  }

  .dnj-product-category {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }

  .dnj-product-code-title {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }

  .dnj-btn-messenger-order {
    padding: 8px 6px;
    font-size: 0.74rem;
    border-radius: 6px;
    gap: 4px;
    white-space: nowrap !important;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .dnj-btn-zalo-sub {
    padding: 6px;
    font-size: 0.72rem;
    border-radius: 6px;
    gap: 4px;
    margin-top: 6px;
    white-space: nowrap !important;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .dnj-values-grid,
  .dnj-footer-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dnj-tab-bar {
    gap: 6px;
    margin-bottom: 16px;
  }

  .dnj-tab-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
  }

  /* LIGHTBOX MODAL COMPACT ON MOBILE */
  .dnj-modal-wrapper {
    padding: 16px 12px;
    border-radius: 18px;
    max-width: 350px;
  }

  .dnj-modal-img-container {
    height: 310px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .dnj-modal-sku-tag {
    margin-bottom: 12px;
  }

  .dnj-modal-sku-pill {
    padding: 5px 14px;
    gap: 6px;
  }

  .dnj-modal-sku-pill .dnj-sku-title {
    font-size: 0.72rem;
  }

  .dnj-modal-sku-pill .dnj-sku-value {
    font-size: 1rem;
  }

  .dnj-btn-messenger-modal {
    padding: 11px 14px;
    font-size: 0.84rem;
    border-radius: 10px;
  }

  .dnj-btn-download-modal {
    padding: 10px 14px;
    font-size: 0.82rem;
    border-radius: 10px;
  }

  .dnj-modal-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .dnj-modal-close-btn {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .dnj-chat-prompt-bubble {
    display: none;
  }

  .dnj-messenger-widget-container {
    bottom: 14px;
    right: 12px;
    gap: 8px;
  }

  .dnj-chat-bubble-btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .dnj-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .dnj-toast-notification {
    top: 72px;
    left: 12px;
    right: 12px;
    max-width: none;
    font-size: 0.8rem;
    padding: 10px 14px;
  }
}

/* ==========================================================================
   ULTRA-LUXURY PRODUCT DETAIL PAGE STYLES
   ========================================================================== */
.dnj-detail-breadcrumb-bar {
  background: #EFEBE0;
  border-bottom: 1px solid rgba(163, 139, 107, 0.3);
  padding: 14px 24px;
}

.dnj-breadcrumb-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: #786856;
  font-family: var(--font-sans);
}

.dnj-breadcrumb-container a {
  color: #3D3024;
  font-weight: 600;
}

.dnj-breadcrumb-container a:hover {
  color: #8C7355;
}

.dnj-breadcrumb-container .separator {
  font-size: 0.7rem;
  color: #A38B6B;
}

.dnj-breadcrumb-container .current {
  color: #8C7355;
  font-weight: 700;
}

/* DETAIL MAIN WRAPPER */
.dnj-detail-main-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 80px 24px;
}

.dnj-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 60px;
}

/* LEFT GALLERY COLUMN */
.dnj-detail-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dnj-detail-main-showcase {
  position: relative;
  width: 100%;
  height: 520px;
  background: #0f172a;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(163, 139, 107, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.dnj-showcase-backdrop {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.55);
  opacity: 0.65;
  transition: background-image 0.4s ease-in-out;
  z-index: 1;
}

.dnj-main-media-element {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  transition: opacity 0.25s ease;
  margin: auto;
}

.dnj-gallery-zoom-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(30, 24, 18, 0.78);
  color: #F7F4EB;
  border: 1px solid rgba(230, 197, 135, 0.6);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.dnj-gallery-zoom-btn i {
  color: #E6C587;
  font-size: 0.85rem;
}

.dnj-gallery-zoom-btn:hover {
  background: rgba(163, 139, 107, 0.95);
  color: #FFFFFF;
  border-color: #E6C587;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(163, 139, 107, 0.45);
}

/* THUMBNAIL CAROUSEL STRIP */
.dnj-detail-thumbs-carousel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  padding: 4px 2px;
}

.dnj-thumb-item {
  position: relative;
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(163, 139, 107, 0.25);
  cursor: pointer;
  background: #FFFFFF;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.dnj-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dnj-thumb-item:hover img {
  transform: scale(1.08);
}

.dnj-thumb-item:hover,
.dnj-thumb-item.active {
  border-color: #A38B6B;
  box-shadow: 0 0 14px rgba(163, 139, 107, 0.45);
  transform: translateY(-2px);
}

.dnj-thumb-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  z-index: 2;
}

.dnj-thumb-video-overlay i {
  font-size: 1.3rem;
  color: #E6C587;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s ease;
}

.dnj-thumb-item:hover .dnj-thumb-video-overlay i {
  transform: scale(1.15);
}

/* RIGHT INFO COLUMN: LUXURY HEADER CARD */
.dnj-detail-header-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(163, 139, 107, 0.35);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(61, 48, 36, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(163, 139, 107, 0.25);
}

.dnj-detail-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(163, 139, 107, 0.4);
  color: #8C7355;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(61, 48, 36, 0.04);
}

.dnj-detail-category-pill strong {
  color: #3D3024;
}

.dnj-silver-authenticity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #3D3024;
  color: #E6C587;
  border: 1px solid #A38B6B;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(61, 48, 36, 0.2);
}

.dnj-detail-sku-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 4vw, 1.85rem);
  font-weight: 700;
  color: #3D3024;
  margin: 8px 0 4px 0;
  line-height: 1.25;
}

.dnj-detail-sku-title .highlight-sku {
  color: #8C7355;
  font-family: var(--font-sans);
  font-weight: 800;
}

.dnj-detail-sub-name {
  font-size: 0.92rem;
  color: #786856;
  line-height: 1.45;
  margin: 0;
}

/* DYNAMIC PRODUCT SPECS CONTAINER */
.dnj-detail-specs-container {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(163, 139, 107, 0.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dnj-specs-header {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 800;
  color: #8C7355;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dnj-specs-header i {
  color: #A38B6B;
}

.dnj-specs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dnj-spec-item {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #3D3024;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(163, 139, 107, 0.2);
}

.dnj-spec-item:last-child {
  border-bottom: none;
}

.dnj-spec-item .spec-label {
  color: #8C7355;
  font-weight: 700;
  margin-right: 4px;
}

.dnj-spec-item .spec-value {
  color: #3D3024;
  font-weight: 500;
}

.dnj-detail-commitments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.dnj-detail-commitments-grid .commit-item {
  background: #FFFFFF;
  border: 1px solid rgba(163, 139, 107, 0.25);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #5C4A38;
  font-weight: 600;
}

.dnj-detail-commitments-grid .commit-item i {
  font-size: 1.15rem;
  color: #A38B6B;
}

/* CTA PRICE QUOTE BOX */
.dnj-detail-cta-box {
  background: #FFFFFF;
  border: 1.5px solid rgba(163, 139, 107, 0.35);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(61, 48, 36, 0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dnj-cta-header {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #3D3024;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(163, 139, 107, 0.2);
}

.dnj-cta-header i {
  color: #A38B6B;
}

.dnj-btn-messenger-detail {
  background: linear-gradient(135deg, #0D233A 0%, #0052CC 100%);
  color: #FFFFFF !important;
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 82, 204, 0.28);
  border: 1px solid rgba(163, 139, 107, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dnj-btn-messenger-detail:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 82, 204, 0.42);
  border-color: #E6C587;
}

.dnj-btn-messenger-detail .btn-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  color: #FFFFFF;
}

.dnj-btn-messenger-detail .btn-text-wrapper {
  flex-grow: 1;
}

.dnj-btn-messenger-detail .btn-text-wrapper strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.dnj-btn-messenger-detail .btn-text-wrapper span {
  display: block;
  font-size: 0.78rem;
  color: #CBD5E1;
  font-weight: 400;
}

.dnj-btn-messenger-detail .btn-arrow {
  color: #E6C587;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.dnj-btn-messenger-detail:hover .btn-arrow {
  transform: translateX(4px);
}

.dnj-btn-zalo-detail {
  background: linear-gradient(135deg, #0A1E38 0%, #0068FF 100%);
  color: #FFFFFF !important;
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 104, 255, 0.25);
  border: 1px solid rgba(163, 139, 107, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.dnj-btn-zalo-detail:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 104, 255, 0.38);
  border-color: #E6C587;
}

.dnj-btn-zalo-detail .btn-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  color: #FFFFFF;
}

.dnj-btn-zalo-detail .btn-text-wrapper {
  flex-grow: 1;
}

.dnj-btn-zalo-detail .btn-text-wrapper strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.dnj-btn-zalo-detail .btn-text-wrapper span {
  display: block;
  font-size: 0.78rem;
  color: #CBD5E1;
  font-weight: 400;
}

.dnj-btn-zalo-detail .btn-arrow {
  color: #E6C587;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.dnj-btn-zalo-detail:hover .btn-arrow {
  transform: translateX(4px);
}

.dnj-btn-phone-detail {
  background: #3D3024;
  color: #F7F4EB !important;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid #A38B6B;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(61, 48, 36, 0.15);
}

.dnj-btn-phone-detail strong {
  color: #E6C587;
}

.dnj-btn-phone-detail:hover {
  background: #8C7355;
  color: #FFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(140, 115, 85, 0.3);
}

.dnj-trust-highlights {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(163, 139, 107, 0.3);
}

.dnj-trust-highlights .trust-item {
  font-size: 0.75rem;
  color: #786856;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dnj-trust-highlights .trust-item i {
  color: #10B981;
  font-size: 0.8rem;
}

.dnj-detail-values-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dnj-detail-values-list .value-row {
  font-size: 0.82rem;
  color: #786856;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dnj-detail-values-list .value-row i {
  color: #A38B6B;
  font-size: 0.9rem;
  margin-top: 3px;
}

/* TABS SECTION */
.dnj-detail-tabs-section {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(163, 139, 107, 0.3);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(61, 48, 36, 0.05);
}

.dnj-detail-tab-header {
  display: flex;
  background: #F5ECDB;
  border-bottom: 1.5px solid rgba(163, 139, 107, 0.35);
}

.dnj-detail-tab-link {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: #3D3024;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  border-right: 1px solid rgba(163, 139, 107, 0.2);
}

.dnj-detail-tab-link:last-child {
  border-right: none;
}

.dnj-detail-tab-link:hover,
.dnj-detail-tab-link.active {
  background: #FFFFFF;
  color: #3D3024;
  border-bottom: 3px solid #3D3024;
}

.dnj-detail-tab-body {
  padding: 32px;
}

.dnj-specs-table {
  width: 100%;
  border-collapse: collapse;
}

.dnj-specs-table tr {
  border-bottom: 1px solid #E2D9C8;
}

.dnj-specs-table tr:last-child {
  border-bottom: none;
}

.dnj-specs-table th {
  width: 220px;
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  color: #3D3024;
  background: #F7F4EB;
  font-size: 0.88rem;
}

.dnj-specs-table td {
  padding: 14px 16px;
  font-size: 0.9rem;
  color: #5C4A38;
}

.dnj-size-guide-wrapper {
  line-height: 1.7;
  color: #5C4A38;
}

.dnj-size-guide-wrapper ol {
  padding-left: 20px;
  margin: 16px 0;
}

.dnj-size-guide-wrapper li {
  margin-bottom: 10px;
}

.dnj-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.policy-card {
  background: #F7F4EB;
  border: 1px solid rgba(163, 139, 107, 0.3);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.policy-card i {
  font-size: 2.2rem;
  color: #8C7355;
  margin-bottom: 12px;
}

.policy-card h4 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #3D3024;
  margin: 0 0 8px 0;
}

.policy-card p {
  font-size: 0.84rem;
  color: #786856;
  margin: 0;
  line-height: 1.5;
}

/* RESPONSIVE DETAIL PAGE BREAKPOINTS */
@media (max-width: 960px) {
  .dnj-detail-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dnj-detail-main-showcase {
    height: 380px;
  }

  .dnj-specs-table th {
    width: 140px;
  }

  .policy-card {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .dnj-detail-main-wrapper {
    padding: 14px 10px 40px 10px;
  }

  .dnj-detail-grid {
    gap: 16px;
  }

  .dnj-detail-main-showcase {
    height: 400px;
    border-radius: 16px;
    padding: 8px;
  }

  .dnj-sku-badge-detail {
    top: 10px;
    left: 10px;
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  .dnj-gallery-zoom-btn {
    bottom: 10px;
    right: 10px;
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  .dnj-thumb-strip-container {
    padding: 12px;
    border-radius: 16px;
  }

  .dnj-thumb-strip-header {
    font-size: 0.74rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .dnj-thumb-strip-grid {
    gap: 8px;
  }

  .dnj-thumb-item {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 10px;
  }

  .dnj-thumb-video-overlay {
    font-size: 0.62rem;
  }

  .dnj-thumb-video-overlay i {
    font-size: 1.25rem;
  }

  /* DETAIL RIGHT COLUMN MOBILE */
  .dnj-detail-header-card {
    padding: 16px;
    border-radius: 16px;
    gap: 12px;
    margin-bottom: 14px;
  }

  .header-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
  }

  .dnj-detail-category-pill {
    font-size: 0.72rem;
    padding: 5px 12px;
  }

  .dnj-silver-authenticity-badge {
    font-size: 0.7rem;
    padding: 5px 12px;
  }

  .header-card-sku .sku-subtitle {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
  }

  .header-card-sku .sku-title-code {
    font-size: 2.2rem;
  }

  /* DETAIL CTA BOX MOBILE */
  .dnj-detail-cta-box {
    padding: 16px;
    border-radius: 16px;
    gap: 10px;
    margin-bottom: 16px;
  }

  .dnj-cta-header {
    font-size: 0.76rem;
    padding-bottom: 8px;
  }

  .dnj-btn-messenger-detail,
  .dnj-btn-zalo-detail {
    padding: 12px 14px;
    border-radius: 14px;
    gap: 10px;
  }

  .dnj-btn-messenger-detail .btn-icon-wrapper,
  .dnj-btn-zalo-detail .btn-icon-wrapper {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .dnj-btn-messenger-detail .btn-text-wrapper strong,
  .dnj-btn-zalo-detail .btn-text-wrapper strong {
    font-size: 0.88rem;
  }

  .dnj-btn-messenger-detail .btn-text-wrapper span,
  .dnj-btn-zalo-detail .btn-text-wrapper span {
    font-size: 0.72rem;
  }

  .dnj-btn-phone-detail {
    padding: 11px 14px;
    font-size: 0.82rem;
    border-radius: 12px;
  }

  .dnj-trust-highlights {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  .dnj-btn-gold-card {
    padding: 8px 6px;
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   CRAFTSMANSHIP RING MAKING VIDEO SHOWCASE SECTION
   ========================================================================== */
.dnj-craftsmanship-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, #F7F4EB 0%, #EFEAE1 50%, #F7F4EB 100%);
  position: relative;
  overflow: hidden;
}

.dnj-craftsmanship-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dnj-craftsmanship-grid {
  display: block;
  max-width: 860px;
  margin: 32px auto 0 auto;
}

.dnj-craft-video-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(61, 48, 36, 0.16);
  border: 1px solid rgba(163, 139, 107, 0.25);
  background: #000;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  margin-bottom: 28px;
}

.dnj-craft-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 72px;
  height: 72px;
  background: rgba(43, 33, 23, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(230, 197, 135, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.dnj-craft-video-play-overlay.paused {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(163, 139, 107, 0.9);
  box-shadow: 0 0 30px rgba(163, 139, 107, 0.6);
}

.dnj-craft-video-card:hover .dnj-craft-video-play-overlay.paused {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(212, 175, 55, 0.95);
}

.dnj-craft-video-play-overlay.playing,
.dnj-craft-video-card:hover .dnj-craft-video-play-overlay:not(.paused) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dnj-craft-video-card {
  position: relative;
  background: #000000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(61, 48, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.dnj-craft-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(61, 48, 36, 0.22);
}

.dnj-craft-video-player {
  width: 100%;
  height: auto;
  max-height: 75vh;
  display: block;
  object-fit: cover;
  border-radius: 24px;
  background: transparent;
}

.dnj-craft-video-badge {
  display: none !important;
}

.dnj-craft-video-controls-bar {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.dnj-craft-control-btn {
  background: rgba(43, 33, 23, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.dnj-craft-control-btn:hover {
  background: #A38B6B;
  color: #FFF;
  border-color: #A38B6B;
}

/* CRAFTSMANSHIP STEPS RIGHT COLUMN */
.dnj-craft-steps-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dnj-craft-step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 1px solid rgba(163, 139, 107, 0.18);
  transition: all 0.3s ease;
}

.dnj-craft-step-item:hover {
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(61, 48, 36, 0.08);
  transform: translateX(6px);
  border-color: #A38B6B;
}

.dnj-craft-step-num {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #A38B6B;
  background: rgba(163, 139, 107, 0.12);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dnj-craft-step-content h4 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: #3D3024;
  margin: 0 0 4px 0;
}

.dnj-craft-step-content p {
  font-size: 0.88rem;
  color: #645445;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) {
  .dnj-craftsmanship-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 576px) {
  .dnj-craftsmanship-section {
    padding: 48px 16px;
  }

  .dnj-craft-video-badge {
    font-size: 0.72rem;
    padding: 6px 14px;
    top: 14px;
    left: 14px;
  }

  .dnj-craft-control-btn {
    font-size: 0.72rem;
    padding: 6px 12px;
  }

  .dnj-craft-step-item {
    padding: 14px;
    gap: 12px;
  }

  .dnj-craft-step-num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1rem;
  }

  .dnj-craft-step-content h4 {
    font-size: 0.98rem;
  }

  .dnj-craft-step-content p {
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   3-VIDEO HUB TABS & CARDS STYLING
   ========================================================================== */
.dnj-video-hub-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 24px;
}

.dnj-video-tab-btn {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(163, 139, 107, 0.3);
  color: #3D3024;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(61, 48, 36, 0.05);
}

.dnj-video-tab-btn:hover {
  background: #FFF;
  border-color: #A38B6B;
  color: #A38B6B;
  transform: translateY(-2px);
}

.dnj-video-tab-btn.active {
  background: #3D3024;
  color: #E6C587;
  border-color: #3D3024;
  box-shadow: 0 8px 24px rgba(61, 48, 36, 0.2);
}

/* 3 VIDEO QUICK CARDS THUMBNAILS GRID */
.dnj-video-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.dnj-vcard-item {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(163, 139, 107, 0.2);
  box-shadow: 0 10px 30px rgba(61, 48, 36, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.dnj-vcard-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(61, 48, 36, 0.15);
  border-color: #A38B6B;
}

.dnj-vcard-item.active {
  border: 2px solid #A38B6B;
  box-shadow: 0 14px 36px rgba(163, 139, 107, 0.25);
  background: #FDFBF7;
}

.vcard-thumb {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.vcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dnj-vcard-item:hover .vcard-thumb img {
  transform: scale(1.08);
}

.vcard-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(43, 33, 23, 0.85);
  backdrop-filter: blur(8px);
  color: #E6C587;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.08em;
}

.vcard-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(163, 139, 107, 0.9);
  color: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.dnj-vcard-item:hover .vcard-play-icon {
  transform: translate(-50%, -50%) scale(1.15);
}

.vcard-info {
  padding: 16px;
}

.vcard-info h4 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 700;
  color: #3D3024;
  margin: 0 0 6px 0;
}

.vcard-info p {
  font-size: 0.82rem;
  color: #645445;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 992px) {
  .dnj-video-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .dnj-video-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dnj-video-tab-btn {
    font-size: 0.8rem;
    padding: 10px 16px;
    width: 100%;
    justify-content: center;
  }

  .vcard-thumb {
    height: 140px;
  }
}

/* ==========================================================================
   ELEGANT QUICK COPY PILL FOR SHOP OWNER SHARING
   ========================================================================== */
.dnj-quick-copy-pill {
  background: rgba(163, 139, 107, 0.12);
  border: 1px solid rgba(163, 139, 107, 0.3);
  color: #3D3024;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.dnj-quick-copy-pill:hover {
  background: #3D3024;
  color: #E6C587;
  border-color: #3D3024;
  transform: translateY(-1px);
}

/* GOLD PULSE HIGHLIGHT FOR CUSTOMER OPENING A LINK */
@keyframes dnjGoldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 197, 135, 0.8);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(230, 197, 135, 0);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(230, 197, 135, 0);
    transform: scale(1);
  }
}

.dnj-highlight-target {
  animation: dnjGoldPulse 1.6s ease 2;
  border: 2px solid #E6C587 !important;
}

/* ==========================================================================
   COMPACT 2-COLUMN X 2-ROW CATEGORIES EXPLORATION GRID
   ========================================================================== */
.dnj-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 992px) {
  .dnj-explore-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.dnj-explore-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid rgba(163, 139, 107, 0.25);
  border-radius: 16px;
  padding: 18px 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(61, 48, 36, 0.05);
}

.dnj-explore-card:hover {
  transform: translateY(-4px);
  border-color: #A38B6B;
  box-shadow: 0 12px 28px rgba(163, 139, 107, 0.2);
}

.dnj-explore-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.dnj-explore-card-icon {
  font-size: 1.6rem;
  color: #A38B6B;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dnj-explore-card-title {
  color: #3D3024;
  font-size: 1.05rem;
  font-family: var(--font-serif);
  font-weight: 700;
  margin: 0 !important;
  line-height: 1.25;
}

.dnj-explore-card-desc {
  color: #786856;
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0 0 12px 0;
  flex-grow: 1;
}

.dnj-explore-card-btn {
  color: #A38B6B;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 680px) {
  .dnj-explore-grid {
    gap: 10px;
    padding: 0 8px;
  }

  .dnj-explore-card {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .dnj-explore-card-header {
    gap: 8px;
    margin-bottom: 6px;
  }

  .dnj-explore-card-icon {
    font-size: 1.25rem !important;
  }

  .dnj-explore-card-title {
    font-size: 0.88rem !important;
    line-height: 1.25;
  }

  .dnj-explore-card-desc {
    font-size: 0.76rem;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dnj-explore-card-btn {
    font-size: 0.75rem;
    gap: 4px;
  }
}

/* ==========================================
   CLEAN & ELEGANT FLAT FOOTER STYLES
   ========================================== */
.dnj-clean-footer {
  background: #1C1612;
  border-top: 2px solid #A38B6B;
  padding: 23px 20px 23px 20px;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .dnj-clean-footer {
    padding: 36px 24px 36px 24px;
  }
}

.dnj-clean-footer-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.dnj-clean-footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dnj-clean-footer-logo {
  height: 38px;
  width: 38px;
  border-radius: 8px;
  border: 1px solid #A38B6B;
  object-fit: cover;
  flex-shrink: 0;
}

.dnj-clean-footer-title {
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.dnj-clean-footer-subtitle {
  color: #E6C587;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88em;
  letter-spacing: 0.03em;
}

.dnj-clean-footer-line {
  width: 60px;
  height: 1px;
  background: #A38B6B;
  margin: 14px auto 16px auto;
  opacity: 0.6;
}

.dnj-clean-footer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.88rem, 3.5vw, 0.96rem);
  line-height: 1.6;
  color: #F1F5F9;
}

.dnj-clean-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dnj-clean-footer-icon {
  color: #E6C587;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.dnj-clean-footer-phone {
  color: #E6C587;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.02em;
}

.dnj-clean-footer-phone:hover {
  color: #F59E0B;
  text-decoration: underline;
}

/* ==========================================
   FULLSCREEN GALLERY LIGHTBOX MODAL
   ========================================== */
.dnj-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 20px 16px;
  animation: dnjFadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dnjFadeInModal {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dnj-lightbox-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
}

.dnj-lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  transform: scale(1.1);
  border-color: #EF4444;
}

.dnj-lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(30, 24, 18, 0.85);
  border: 1.5px solid rgba(230, 197, 135, 0.6);
  color: #E6C587;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dnj-lightbox-nav-btn:hover {
  background: #A38B6B;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.12);
}

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

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

@media (max-width: 600px) {
  .dnj-lightbox-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }

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

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

.dnj-lightbox-stage {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 40px 0 16px 0;
}

.dnj-lightbox-media {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.dnj-lightbox-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.dnj-lightbox-counter {
  color: #E6C587;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 16px;
  border-radius: 50px;
  border: 1px solid rgba(230, 197, 135, 0.3);
}

.dnj-lightbox-thumbs-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  max-width: 90vw;
  padding: 4px;
}

.dnj-lightbox-thumb-item {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  background: #000;
  transition: all 0.25s ease;
}

.dnj-lightbox-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dnj-lightbox-thumb-item.active,
.dnj-lightbox-thumb-item:hover {
  border-color: #E6C587;
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(230, 197, 135, 0.6);
}

.lightbox-thumb-play {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #E6C587;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* ==========================================================================
   MINIMALIST LUXURY CATEGORY HEADER (TIFFANY, CARTIER & SWAROVSKI AESTHETIC)
   ========================================================================== */
.dnj-cat-header-luxury {
  background: linear-gradient(180deg, #FBF9F5 0%, #F4EFE6 100%);
  border-bottom: 1px solid rgba(163, 139, 107, 0.2);
  padding: 28px 20px 24px 20px;
  text-align: center;
}

.dnj-cat-header-container {
  max-width: 860px;
  margin: 0 auto;
}

.dnj-cat-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.76rem;
  color: #8C7355;
  margin-bottom: 12px;
}

.dnj-cat-breadcrumb a {
  color: #8C7355;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dnj-cat-breadcrumb a:hover {
  color: #3D3024;
}

.dnj-cat-breadcrumb .sep {
  color: #C2B49F;
  font-size: 0.7rem;
}

.dnj-cat-breadcrumb .active {
  font-weight: 600;
  color: #3D3024;
}

.dnj-cat-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #A38B6B;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dnj-cat-main-title {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  color: #1C1612;
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
}

.dnj-cat-desc {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.dnj-cat-action-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dnj-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dnj-pill-btn.messenger {
  background: #0072FF;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 114, 255, 0.22);
}

.dnj-pill-btn.messenger:hover {
  background: #0056C6;
  transform: translateY(-1px);
}

.dnj-pill-btn.guide {
  background: #2C221B;
  color: #F7F4EB !important;
  border: 1px solid #A38B6B;
}

.dnj-pill-btn.guide:hover {
  background: #45362B;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .dnj-cat-header-luxury {
    padding: 16px 12px 14px 12px;
  }

  .dnj-cat-main-title {
    font-size: 1.35rem;
  }

  .dnj-cat-desc {
    font-size: 0.78rem;
    margin-bottom: 12px;
  }

  .dnj-pill-btn {
    font-size: 0.72rem;
    padding: 7px 12px;
    width: 100%;
    justify-content: center;
  }
}