/* CSS tuy chinh chinh */ 
:root { 
    /* Brand Core */
    --primary-color: #E35D92; /* Main accent (pink/magenta) */
    --primary-color-rgb: 227,93,146;
    --secondary-color: #ffffff; /* Light / base white */
    --success-color: #BC4076; /* Secondary accent (darker variant) */

    /* Deprecated Teal Palette (legacy) - keep for fallback only */
    /* --teal-50: #e6fbfb; */
    /* --teal-100: #c8f4f4; */
    /* --teal-200: #a3ecec; */
    /* --teal-300: #7ce3e3; */
    /* --teal-400: #54d3d3; */
    /* --teal-500: #2ababa; */
    /* --teal-600: #189e9e; */
    /* --teal-700: #0d5e5e; */
    /* --teal-800: #004d4d; */
    /* --teal-900: #013a3a; */

    /* Semantic Text Colors */
    --text-white: #ffffff;
    --text-light: rgba(255,255,255,0.85);
    --text-muted: rgba(255,255,255,0.6);
    --text-dark: #222831;
    /* Accent alias */
    --text-accent: var(--primary-color);
    --text-teal: var(--text-accent); /* backward compatibility */

    /* Surface / Glass */
    --glass-light: rgba(255,255,255,0.35);
    --glass-medium: rgba(255,255,255,0.25);
    --glass-strong: rgba(255,255,255,0.15);
    --glass-border: rgba(255,255,255,0.25);

    /* Gradients (if used in header) */
    /* Deprecated (legacy): --teal-gradient kept temporarily for fallback */
    --teal-gradient: linear-gradient(135deg, var(--pink-500) 0%, var(--pink-700) 100%);
    --purple-gradient: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);

    /* Feedback / State */
    --danger-color: #c62828;
    --danger-soft: #ffcdd2;
    --warning-color: #ffb648;
    --info-color: #3d7fff;

    /* Pink Brand Extended Scale */
    --pink-50: #ffe7f1;
    --pink-100: #ffcfe2;
    --pink-200: #ffb8d4;
    --pink-300: #ff9cc3;
    --pink-400: #ff82b4;
    --pink-500: #E35D92; /* aligns with primary */
    --pink-600: #d14983; /* hover */
    --pink-700: #bc4076; /* aligns with success-color */
    --pink-800: #9c325f; 
    --pink-900: #7d274c;

    /* Brand Gradient */
    --brand-gradient: linear-gradient(135deg, var(--pink-500) 0%, var(--pink-700) 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(var(--primary-color-rgb),0.15) 0%, rgba(var(--primary-color-rgb),0.35) 100%);

    /* Interactive States */
    --primary-hover: var(--pink-600);
    --primary-active: var(--pink-700);
    
    /* Social Media Variables */
    --primary-pink: var(--pink-500);
    --secondary-pink: var(--pink-600);
    --primary-pink-rgb: 227,93,146;
} 

/* Product Grid Component Base Variables (inherits brand palette) */
 :root {
  --pg-gap: clamp(.75rem, 2vw, 1.25rem);
  --pg-card-radius: 18px;
  --pg-swatch-size: 20px;
 }
 a{text-decoration:none!important}
body { 
    font-family: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif; 
} 
.blog-pagination { border-top:1px solid rgba(var(--primary-color-rgb),0.25); }
.bp-pager .bp-dot, .bp-pager .bp-nav{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(var(--primary-color-rgb),0.25); background:#fff; color:var(--primary-color); display:inline-flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer; transition:all .2s ease; }
.bp-pager .bp-dot.active{ background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.bp-pager .bp-dot:hover, .bp-pager .bp-nav:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(var(--primary-color-rgb),0.45); }
