/*
Theme Name: Orchard Luxury - Nước Hoa & Mỹ Phẩm Chính Hãng
Theme URI: https://chauauhealthyfood.com/
Author: Orchard Parfumerie Team
Author URI: https://chauauhealthyfood.com/
Description: Theme WordPress cao cấp mô phỏng giao diện Orchard.vn theo chuẩn Taste Skill (tasteskill.dev). Tối ưu Haute Parfumerie, nghệ thuật typography chữ uốn lượn hỗ trợ tiếng Việt trọn vẹn (Playfair Display, Cormorant Garamond, Dancing Script, Be Vietnam Pro), 0% emoji (100% SVG tinh xảo). Tương thích WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orchard
Tags: e-commerce, custom-colors, custom-header, custom-menu, featured-images, full-width-template, translation-ready, woocommerce
*/

@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;1,500&family=Cinzel:wght@600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Dancing+Script:wght@500;600;700&family=Montserrat:wght@400;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&subset=vietnamese&display=swap');

:root {
  --color-crimson: #c4122f;
  --color-crimson-dark: #9f0e26;
  --color-crimson-light: #e61d3e;
  --color-gold: #c5a059;
  --color-gold-light: #e8d7b3;
  --color-gold-dark: #9a7632;
  --color-noir: #161616;
  --color-charcoal: #262626;
  --color-cream: #fbf9f5;
  --color-cream-subtle: #f4efe6;
  --color-border: #ece5d8;
  --color-border-dark: #383838;
  --color-text-muted: #6e675f;
  --font-curved-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-flowing-serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-script: 'Dancing Script', cursive;
  --font-body: 'Be Vietnam Pro', -apple-system, sans-serif;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--color-noir);
  background-color: #ffffff;
}

body {
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Classes */
.font-curved {
  font-family: var(--font-curved-serif);
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Sturdy Numeral Typography (Chữ số vững chãi, vuông vắn, mạnh mẽ, không bị xiêu vẹo) */
.sturdy-num,
.font-number,
.font-numeric {
  font-family: 'Montserrat', 'Be Vietnam Pro', -apple-system, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.font-serif {
  font-family: 'Playfair Display', 'Be Vietnam Pro', serif !important;
}

.font-serif.italic,
p.font-serif.italic,
span.font-serif.italic,
div.font-serif.italic {
  font-family: 'Playfair Display', 'Be Vietnam Pro', serif !important;
}

.font-serif-luxury {
  font-family: var(--font-flowing-serif);
}

.font-script {
  font-family: var(--font-script);
}

.font-sans-vn {
  font-family: var(--font-body);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c5a059;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-crimson);
}

/* Header & Utility Bar */
.top-announcement-bar {
  background: linear-gradient(90deg, #b00f28 0%, #c4122f 50%, #990c21 100%);
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* Sticky Header */
.main-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: all 0.3s ease;
}

.main-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Logo Flourish */
.brand-logo-text {
  font-family: var(--font-curved-serif);
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
}

.brand-logo-sub {
  font-family: var(--font-body);
  letter-spacing: 0.32em;
  font-size: 8px;
  text-transform: uppercase;
  color: var(--color-crimson);
  font-weight: 600;
}

/* Nav links hover effect */
.nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #2b2b2b;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 2px;
  background: var(--color-crimson);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.nav-link:hover {
  color: var(--color-crimson);
}

.nav-link:hover::after {
  width: 100%;
}

/* Hero Section */
.hero-wrapper {
  background: linear-gradient(135deg, #180306 0%, #2e070c 50%, #4a0c13 100%);
  position: relative;
  overflow: hidden;
}

.hero-curved-title {
  font-family: var(--font-curved-serif);
  line-height: 1.15;
}

.hero-script-flourish {
  font-family: var(--font-script);
  font-size: 1.35em;
  color: #f7d794;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Guarantee strip */
.guarantee-bar {
  background: #fbf9f5;
  border-bottom: 1px solid var(--color-border);
}

/* Category Cards */
.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease;
  border: 1px solid #ebd9c4;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(196, 18, 47, 0.12);
}

.category-card img {
  transition: transform 0.6s ease;
}

.category-card:hover img {
  transform: scale(1.06);
}

.category-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(20,20,20,0.88) 0%, rgba(20,20,20,0.4) 60%, transparent 100%);
  padding: 18px 10px 10px;
  text-align: center;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Brand Grid */
.brand-pill {
  border: 1px solid var(--color-border);
  background: #ffffff;
  transition: all 0.25s ease;
  font-family: var(--font-curved-serif);
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #333333;
}

.brand-pill:hover {
  border-color: var(--color-gold);
  color: var(--color-crimson);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.18);
  transform: translateY(-2px);
}

/* Product Card - Inspired by Orchard.vn Real Design */
.product-card {
  background: #ffffff;
  border: 1px solid #ede8de;
  border-radius: 6px;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.product-card:hover {
  border-color: #d1b894;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.product-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  background: #faf8f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-container img {
  max-height: 90%;
  max-width: 90%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

/* Orchard Gift Tag presentation */
.orchard-gift-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #c4122f 0%, #e61d3e 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(196, 18, 47, 0.3);
}

.product-badge-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #1e1e1e;
  color: #eeddbb;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(197, 160, 89, 0.3);
}

.product-discount-pill {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ffd4dc;
  color: var(--color-crimson);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Floating Action Layer on Product Hover */
.product-hover-actions {
  position: absolute;
  bottom: -45px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
  transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.product-card:hover .product-hover-actions {
  bottom: 0;
}

.btn-quick-view {
  background: #ffffff;
  border: 1px solid #d4c4b0;
  color: #333333;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-quick-view:hover {
  background: var(--color-noir);
  color: #ffffff;
  border-color: var(--color-noir);
}

.btn-add-cart-card {
  background: var(--color-crimson);
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-add-cart-card:hover {
  background: var(--color-crimson-dark);
}

/* Product Info */
.product-brand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7369;
}

.product-title {
  font-family: var(--font-curved-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.product-card:hover .product-title {
  color: var(--color-crimson);
}

.price-current {
  font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif !important;
  font-size: 15px;
  font-weight: 800 !important;
  color: var(--color-crimson);
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1;
}

.price-original {
  font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
  color: #9c9488;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Floating Consultation Widget */
.floating-widget-card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 45;
  width: 320px;
  background: #ffffff;
  border: 1px solid #ebd9c4;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  padding: 16px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.floating-widget-card.minimized {
  display: none;
}

.floating-trigger-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 46;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4122f 0%, #990c21 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(196, 18, 47, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid rgba(255,255,255,0.3);
}

.floating-trigger-btn:hover {
  transform: scale(1.08);
}

/* Modals & Drawers */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  background: #ffffff;
  border-radius: 10px;
  max-width: 650px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--color-gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active .modal-dialog {
  transform: translateY(0) scale(1);
}

/* Cart Slide-out Drawer */
.cart-drawer-container {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-drawer-container.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-container.open .cart-drawer-panel {
  transform: translateX(0);
}

/* Toast Notification */
.toast-notice {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 120;
  background: #1e1e1e;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 6px;
  border-left: 4px solid var(--color-crimson);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notice.show {
  transform: translateX(0);
}

/* Search Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
  display: none;
}

.search-results-dropdown.active {
  display: block;
}

/* Footer Section */
.footer-main {
  background-color: #1a1a1a;
  color: #cccccc;
  border-top: 1px solid #333333;
}

.footer-heading {
  font-family: var(--font-curved-serif);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 6px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1.5px;
  background: var(--color-crimson);
}

.footer-link {
  color: #a8a8a8;
  font-size: 13.5px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* ========================================================
   TỐI ƯU HÓA GIAO DIỆN MOBILE (6.1 INCH ĐẾN 6.9 INCH: 390px - 440px)
   iPhone 12/13/14/15/16 Pro, Pro Max, Galaxy S23/S24/Ultra
   ======================================================== */

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  z-index: 95;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
  color: #666666;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn:active {
  transform: scale(0.92);
}

.mobile-nav-btn:hover,
.mobile-nav-btn:focus {
  color: var(--color-crimson);
}

.mobile-nav-label {
  font-size: 10px;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.mobile-quiz-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fcedcf 0%, #f7dfaf 100%);
  border: 1px solid #ebd9c4;
  color: var(--color-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
  box-shadow: 0 4px 10px rgba(196, 18, 47, 0.18);
}

.mobile-badge-count {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--color-crimson);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Off-Canvas Mobile Drawer */
.mobile-drawer-container {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s ease;
}

.mobile-drawer-container.open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-drawer-container.open .mobile-drawer-backdrop {
  opacity: 1;
}

.mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 86%;
  max-width: 340px;
  background: #ffffff;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

.mobile-drawer-container.open .mobile-drawer-panel {
  transform: translateX(0);
}

/* Touch targets & Mobile Media Queries */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .footer-main {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 16px)) !important;
  }
}

@media (max-width: 767px) {
  /* Ẩn widget tư vấn nổi của desktop để không che màn hình điện thoại */
  .floating-widget-card,
  .floating-trigger-btn {
    display: none !important;
  }

  /* Cart Drawer chiếm trọn bề ngang màn hình mobile để tối đa diện tích chạm */
  .cart-drawer-panel {
    max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  /* Modal xem nhanh và quiz trên mobile */
  .modal-dialog {
    width: 95%;
    max-height: 88vh;
    margin: 12px;
    border-radius: 12px;
  }
  
  /* Giảm khoảng cách lưới sản phẩm mobile để tối ưu bề ngang 390px - 440px */
  .product-image-container {
    aspect-ratio: 1 / 1.08;
  }

  .product-brand {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .product-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .orchard-gift-badge {
    font-size: 8.5px;
    padding: 2px 5px;
    top: 5px;
    right: 5px;
  }

  .product-badge-tag {
    font-size: 8.5px;
    padding: 2px 5px;
    top: 5px;
    left: 5px;
  }

  .product-discount-pill {
    font-size: 9.5px;
    padding: 1.5px 5px;
    bottom: 5px;
    left: 5px;
  }
}

/* Media query tối ưu chuyên biệt cho độ phân giải 6.1" - 6.9" (390px - 440px) */
@media (min-width: 375px) and (max-width: 440px) {
  /* Khung hero tinh chỉnh font chữ không bị tràn */
  .hero-curved-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .hero-script-flourish {
    font-size: 1.25em;
  }

  /* Tiêu đề mục sản phẩm */
  h2.font-curved {
    font-size: 1.45rem;
  }
}

/* ========================================================
   LUXURY ANIMATION SUITE (TASTE SKILL - HAUTE PARFUMERIE)
   Mượt mà, tinh tế, 60fps/120fps GPU Accelerated
   ======================================================== */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseGoldGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(197, 160, 89, 0.25);
  }
}

@keyframes pulseCrimsonGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(196, 18, 47, 0.45);
  }
  50% {
    box-shadow: 0 0 14px 4px rgba(196, 18, 47, 0.25);
  }
}

@keyframes shimmerMove {
  0% {
    left: -100%;
  }
  35%, 100% {
    left: 100%;
  }
}

/* Cuộn mượt (Scroll Reveal Classes) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Độ trễ xếp tầng tự nhiên (Stagger Delays) */
.delay-75  { transition-delay: 75ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-250 { transition-delay: 250ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Hero Entrance Animations */
.animate-hero-title {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.15s;
}

.animate-hero-sub {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.3s;
}

.animate-hero-cta {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.45s;
}

.animate-hero-banner {
  animation: fadeInScale 1.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.25s;
}

/* Hiệu ứng bay bổng nhẹ cho ảnh chai nước hoa */
.floating-subtle {
  animation: floatGentle 5s ease-in-out infinite;
}

/* Ánh kim lướt qua huy hiệu cột mốc */
.badge-shimmer {
  position: relative;
  overflow: hidden;
}

.badge-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmerMove 4s infinite;
}

/* Tương tác vi mô nút bấm sang trọng */
.btn-luxury-shine {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.btn-luxury-shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(196, 18, 47, 0.3);
}

.btn-luxury-shine:active {
  transform: translateY(0) scale(0.97);
}

/* Smooth Product Card Transitions */
.product-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
  border-color: #d8c7af;
}

.product-image-container img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-image-container img {
  transform: scale(1.07);
}

/* Category cards hover smooth */
.category-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(196, 18, 47, 0.12);
  border-color: var(--color-gold);
}

/* Brand pills hover */
.brand-pill,
[class*="grid-cols-"] > div.border {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

[class*="grid-cols-"] > div.border:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(197, 160, 89, 0.18);
  border-color: var(--color-gold);
}

/* Mobile Bottom Bar Quiz Glow */
.mobile-quiz-icon-wrap {
  animation: pulseGoldGlow 3s infinite ease-in-out;
}

/* Chế độ giảm chuyển động cho người dùng nhạy cảm */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}