/*
Theme Name: Minh Phượng Cosmetics Child
Theme URI: https://myphamminhphuong.com.vn
Description: Child Theme chính thức dành cho thương hiệu Hóa Mỹ Phẩm Minh Phượng (Established 2005) — Gia công Mỹ phẩm Tóc Chuẩn CGMP & Giải Pháp Phục Hồi Chuyên Nghiệp.
Author: Minh Phượng Cosmetics
Author URI: https://myphamminhphuong.com.vn
Template: hello-elementor
Version: 1.0.0
Text Domain: myphamminhphuong-child
*/

/* Custom Brand Design Tokens */
:root {
  --color-cream: #F4F1EA;
  --color-cream-card: #EFEBE4;
  --color-cream-surface: #E7E2D8;
  --color-sand: #D4C5B9;
  --color-sand-light: #E5DCD3;
  --color-forest: #163A1B;
  --color-forest-light: #1E542D;
  --color-forest-leaf: #317135;
  --color-forest-sage: #5A8F41;
  --color-gold: #E2B13C;
  --color-gold-hover: #C99B2D;
  --color-gold-light: #F5E4B3;
  --color-charcoal: #2A2B2F;
}

body {
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}

.headline-editorial {
  font-family: 'Paytone One', sans-serif;
  line-height: 1.18;
  letter-spacing: 0.005em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-forest-sage);
}

/* Primary CTA Button High-Contrast Hover Guarantee */
a.bg-forest, button.bg-forest, .bg-forest {
  color: #F4F1EA !important;
}
a.bg-forest:hover, button.bg-forest:hover {
  background-color: #1E542D !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(22, 58, 27, 0.4);
}
a.bg-forest:hover span, button.bg-forest:hover span {
  color: #FFFFFF !important;
}
a.bg-forest:hover i, button.bg-forest:hover i {
  color: #E2B13C !important;
}

/* Secondary Button Hover */
a.border-forest:hover, button.border-forest:hover {
  background-color: #163A1B !important;
  color: #FFFFFF !important;
  border-color: #163A1B !important;
}

/* Glassmorphism Panel Refinements */
.glass-panel {
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Video Smooth Loading & High-Res Poster Guarantee */
.hero-video-el {
  opacity: 1;
}

/* ==========================================================================
   UNIFIED BOTANICAL TAB & BUTTON HOVER SYSTEM (STRICT DESIGN.MD GUIDELINE)
   ========================================================================== */

/* Global Reset Against Unwanted Magenta/Burgundy Focus Rings */
button:focus, button:focus-visible, button:active, a:focus, a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Product Filter Tabs System (100% Synchronized with Design System) */
.product-tab {
  font-family: inherit;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 9999px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
  border: 1px solid #E5DFD3 !important;
  background-color: #F4F1EA !important;
  color: #163A1B !important;
}

/* Inactive Tab Hover State */
.product-tab:not(.tab-active):hover,
.product-tab:not(.tab-active):focus {
  background-color: #163A1B !important;
  color: #E2B13C !important;
  border-color: #E2B13C !important;
  box-shadow: 0 4px 14px rgba(22, 58, 27, 0.25) !important;
  transform: translateY(-1px);
}

/* Active Tab State */
.product-tab.tab-active {
  background-color: #163A1B !important;
  color: #E2B13C !important;
  border: 1px solid #E2B13C !important;
  box-shadow: 0 4px 16px rgba(22, 58, 27, 0.3) !important;
}

.product-tab.tab-active:hover {
  background-color: #1E542D !important;
  color: #FFFFFF !important;
  border-color: #E2B13C !important;
}

/* Product Card "Yêu Cầu Mẫu" Button - 100% Synchronized with Active Tab */
.btn-request-sample {
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 0.5rem 1.15rem !important;
  border-radius: 9999px !important;
  background-color: #163A1B !important;
  color: #E2B13C !important;
  border: 1px solid #E2B13C !important;
  outline: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(22, 58, 27, 0.15) !important;
}

.btn-request-sample:hover,
.btn-request-sample:focus,
.btn-request-sample:active {
  background-color: #E2B13C !important;
  color: #163A1B !important;
  border-color: #E2B13C !important;
  box-shadow: 0 4px 14px rgba(226, 177, 60, 0.4) !important;
  transform: translateY(-1px);
}

.btn-request-sample:hover i,
.btn-request-sample:focus i {
  color: #163A1B !important;
}

/* ==========================================================================
   CodeFronts Scroll Reveal Animation System (Ultra-Smooth, 0kb Dependencies)
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal.from-left {
  transform: translateX(-60px);
}

.reveal.from-right {
  transform: translateX(60px);
}

.reveal.from-bottom {
  transform: translateY(50px);
}

.reveal.from-top {
  transform: translateY(-50px);
}

.reveal.scale-up {
  transform: scale(.88);
}

.reveal.rotate-in {
  transform: rotate(-6deg) scale(.92);
}

.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered Delay Classes */
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }
.delay-5 { transition-delay: .5s; }
.delay-6 { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}