/**
* ShopNoi Professional Theme
* Modern, Clean, Professional E-commerce Design
* Version: 2.0
*
* Design Philosophy:
* - Elegant and trustworthy appearance
* - Thai-friendly typography
* - Smooth animations and micro-interactions
* - Modern gradients and glassmorphism effects
* - Mobile-first responsive design
*/
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');
:root {
--primary: #0a7193;
--primary-light: #0c8eb8;
--primary-dark: #086075;
--primary1: #0a7193;
--secondary: #0a7193;
--secondary-light: #0c8eb8;
--secondary-dark: #086075;
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--danger: #ef4444;
--danger-light: #fee2e2;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--bg-tertiary: #f3f4f6;
--bg-card: #ffffff;
--bg-input: #ffffff;
--bg-hover: #f3f4f6;
--text-primary: #111827;
--text-secondary: #374151;
--text-tertiary: #6b7280;
--text-muted: #9ca3af;
--text-inverse: #ffffff;
--border-color: #e5e7eb;
--border-light: #f3f4f6;
--border-dark: #d1d5db;
--shadow-color: rgba(0, 0, 0, 0.1);
--overlay-color: rgba(0, 0, 0, 0.5);
--font-heading: 'Sarabun', sans-serif;
--font-body: 'Sarabun', sans-serif;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-glow: 0 0 40px -10px rgba(10, 113, 147, 0.4);
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
--gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
--gradient-dark: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
}
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--bg-card: #1e293b;
--bg-input: #1e293b;
--bg-hover: #334155;
--text-primary: #f1f5f9;
--text-secondary: #e2e8f0;
--text-tertiary: #94a3b8;
--text-muted: #64748b;
--text-inverse: #0f172a;
--border-color: #334155;
--border-light: #1e293b;
--border-dark: #475569;
--shadow-color: rgba(0, 0, 0, 0.3);
--overlay-color: rgba(0, 0, 0, 0.7);
--gray-50: #1e293b;
--gray-100: #334155;
--gray-200: #475569;
--gray-300: #64748b;
--gray-400: #94a3b8;
--gray-500: #cbd5e1;
--gray-600: #e2e8f0;
--gray-700: #f1f5f9;
--gray-800: #f8fafc;
--gray-900: #ffffff;
--white: #1e293b;
--chalk: #1e293b;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}
[data-theme="dark"] body {
background: #0f172a !important;
}
[data-theme="dark"] body::before {
opacity: 0.12 !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-1H2a1 1 0 01-1-1v-3a1 1 0 011-1h1a7 7 0 017-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2M7.5 13A2.5 2.5 0 005 15.5 2.5 2.5 0 007.5 18a2.5 2.5 0 002.5-2.5A2.5 2.5 0 007.5 13m9 0a2.5 2.5 0 00-2.5 2.5 2.5 2.5 0 002.5 2.5 2.5 2.5 0 002.5-2.5 2.5 2.5 0 00-2.5-2.5z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") !important;
background-position:
3% 12%,
6% 32%,
3% 52%,
6% 72%,
3% 92%,
97% 18%,
94% 42%,
97% 66%,
94% 90% !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 25%, #e8f4fd 50%, #dbeafe 75%, #eff6ff 100%);
background-attachment: fixed;
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: 0.18;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-1H2a1 1 0 01-1-1v-3a1 1 0 011-1h1a7 7 0 017-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2M7.5 13A2.5 2.5 0 005 15.5 2.5 2.5 0 007.5 18a2.5 2.5 0 002.5-2.5A2.5 2.5 0 007.5 13m9 0a2.5 2.5 0 00-2.5 2.5 2.5 2.5 0 002.5 2.5 2.5 2.5 0 002.5-2.5 2.5 2.5 0 00-2.5-2.5z'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7193'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
background-size: 42px 42px;
background-position:
3% 12%,
6% 32%,
3% 52%,
6% 72%,
3% 92%,
97% 18%,
94% 42%,
97% 66%,
94% 90%;
background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gray-800);
line-height: 1.3;
margin-bottom: var(--space-4);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.25rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--space-4);
color: var(--gray-600);
}
a {
color: var(--primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(10, 113, 147, 0.3); }
50% { box-shadow: 0 0 40px rgba(10, 113, 147, 0.5); }
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in {
animation: fadeIn 0.4s ease-out forwards;
}
.animate-slide-left {
animation: slideInLeft 0.5s ease-out forwards;
}
.animate-slide-right {
animation: slideInRight 0.5s ease-out forwards;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.header-part {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 1050;
transition: all var(--transition-base);
}
.header-part.scrolled {
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.98);
}

/* Navbar part - เส้นขอบล่าง */
.navbar-part {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Header widget group - กรอบเส้นบาง */
.header-widget-group {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
border: 1.5px solid #3b5998;
border-radius: 12px;
background: rgba(255, 255, 255, 0.95);
}

/* User email - จัดการอีเมลยาว */
.header-widget span {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 140px;
gap: 2px;
margin-left: 2px;
}
.header-widget span p {
margin: 0;
line-height: 1.4;
}
.header-widget span p:first-child {
font-size: 11px;
font-weight: 600;
color: #333;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-widget span p:last-child {
font-size: 13px;
font-weight: 700;
margin-top: 2px;
}

.dropdown-menu {
z-index: 1060 !important;
position: absolute !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: var(--radius-lg);
}
.dropdown-item {
padding: 10px 20px;
transition: all var(--transition-fast);
}
.dropdown-item:hover {
background: rgba(10, 113, 147, 0.1);
color: var(--primary);
}
.navbar .dropdown-menu,
.nav-item .dropdown-menu,
.header-part .dropdown-menu {
z-index: 99999 !important;
}
@media (min-width: 992px) {
.dropdown-position-list,
.dropdown-list,
.megamenu,
.dropdown .dropdown-position-list,
.navbar-nav .dropdown-position-list,
.header-part .dropdown-position-list,
.navbar-nav .dropdown-list,
ul.dropdown-position-list,
.navbar-item .dropdown-position-list,
li.navbar-item.dropdown .dropdown-position-list {
z-index: 99999 !important;
}
.dropdown:hover .dropdown-position-list,
.navbar-item.dropdown:hover .dropdown-position-list {
top: 50px !important;
}
.dropdown-megamenu:hover .megamenu {
top: 210px !important;
}
.dropdown,
.nav-item.dropdown,
.navbar-item,
.navbar-item.dropdown,
li.navbar-item.dropdown {
z-index: 99998 !important;
}
.header-part {
z-index: 99990 !important;
}
}
[data-theme="dark"] .dropdown-position-list,
[data-theme="dark"] ul.dropdown-position-list {
background: #0f172a !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .header-widget-group .header-widget,
[data-theme="dark"] .header-widget-group button.header-widget,
[data-theme="dark"] .header-widget-group a.header-widget {
background: transparent !important;
border: none !important;
color: #e2e8f0 !important;
}
[data-theme="dark"] .header-widget-group .header-widget:hover {
background: transparent !important;
}
/* Dark mode - header-widget-group กรอบ */
[data-theme="dark"] .header-widget-group {
border: 1.5px solid #3b5998;
background: rgba(30, 41, 59, 0.9);
}
[data-theme="dark"] .header-widget span p:first-child {
color: #e2e8f0;
}
[data-theme="dark"] .navbar-part {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* ซ่อนเส้นขาวระหว่าง header กับ navbar ใน dark mode */
[data-theme="dark"] .navbar-content {
border-top: none;
}
[data-theme="dark"] .header-widget i,
[data-theme="dark"] .header-widget-group .header-widget i {
background: #1e293b !important;
color: #94a3b8 !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .header-widget:hover i,
[data-theme="dark"] .header-widget-group .header-widget:hover i {
background: #334155 !important;
color: #22d3ee !important;
border-color: #0891b2 !important;
}
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] #themeToggle,
[data-theme="dark"] button.theme-toggle.header-widget {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] #themeToggle:hover {
background: #334155 !important;
border-color: #0891b2 !important;
}
[data-theme="dark"] .theme-toggle i,
[data-theme="dark"] #themeToggle i {
background: transparent !important;
border: none !important;
}
[data-theme="dark"] .header-form,
[data-theme="dark"] header .header-form,
[data-theme="dark"] .header-part .header-form,
[data-theme="dark"] .header-content .header-form {
background: #1e293b !important;
border: 1px solid #334155 !important;
border-radius: 8px !important;
}
[data-theme="dark"] .header-form:focus-within {
background: #1e293b !important;
border-color: #0891b2 !important;
}
[data-theme="dark"] .header-form input,
[data-theme="dark"] .header-form input[type="text"] {
background: transparent !important;
border: none !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .header-form input::placeholder {
color: #64748b !important;
}
[data-theme="dark"] .header-form button,
[data-theme="dark"] .header-form button i {
background: #334155 !important;
border: none !important;
color: #94a3b8 !important;
border-radius: 6px !important;
}
[data-theme="dark"] .header-form button:hover,
[data-theme="dark"] .header-form button:hover i {
background: #0891b2 !important;
color: #ffffff !important;
}
[data-theme="dark"] .megamenu,
[data-theme="dark"] .dropdown-megamenu .megamenu,
[data-theme="dark"] .navbar-item.dropdown-megamenu .megamenu {
background: #0f172a !important;
border: 1px solid #334155 !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .megamenu .container,
[data-theme="dark"] .megamenu .row {
background: transparent !important;
}
[data-theme="dark"] .megamenu-wrap {
background: transparent !important;
}
[data-theme="dark"] .megamenu-title {
color: #22d3ee !important;
border-bottom: 1px solid #334155 !important;
background: transparent !important;
}
[data-theme="dark"] .megamenu-list {
background: transparent !important;
}
[data-theme="dark"] .megamenu-list li {
background: transparent !important;
}
[data-theme="dark"] .megamenu-list li a {
color: #cbd5e1 !important;
background: transparent !important;
}
[data-theme="dark"] .megamenu-list li a:hover {
color: #22d3ee !important;
background: rgba(34, 211, 238, 0.1) !important;
}
[data-theme="dark"] .dropdown-position-list,
[data-theme="dark"] ul.dropdown-position-list,
[data-theme="dark"] .navbar-item .dropdown-position-list,
[data-theme="dark"] .dropdown .dropdown-position-list {
background: #0f172a !important;
border: 1px solid #334155 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .dropdown-position-list li,
[data-theme="dark"] .dropdown-list li {
background: transparent !important;
}
[data-theme="dark"] .dropdown-position-list li a,
[data-theme="dark"] .dropdown-list li a {
color: #cbd5e1 !important;
background: transparent !important;
}
[data-theme="dark"] .dropdown-position-list li a:hover,
[data-theme="dark"] .dropdown-list li a:hover {
color: #22d3ee !important;
background: rgba(34, 211, 238, 0.1) !important;
}
.nav-sidebar,
.nav-sidebar.active,
.category-sidebar,
.category-sidebar.active {
z-index: 999990 !important;
position: fixed !important;
}
.nav-sidebar-overlay {
z-index: 999989 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.5) !important;
}
.cart-sidebar {
position: fixed !important;
top: 0 !important;
right: -450px;
width: 400px;
height: 100vh !important;
z-index: 999991 !important;
overflow-y: auto !important;
}
.cart-sidebar.active {
right: 0 !important;
z-index: 999991 !important;
}
.category-sidebar-overlay,
.cart-sidebar-overlay,
.backdrop,
.sidebar-overlay {
z-index: 999988 !important;
}
.modal,
.modal-dialog,
.modal-content,
.modal-backdrop,
.modal.show,
.modal.fade {
z-index: 999999 !important;
}
.modal-backdrop {
z-index: 999998 !important;
}
.modal-close {
z-index: 1000000 !important;
}
.theme-toggle-mobile {
transition: all 0.3s ease;
}
.theme-toggle-mobile:hover {
background: var(--primary) !important;
color: white !important;
border-color: var(--primary) !important;
}
[data-theme="dark"] .theme-toggle-mobile {
background: var(--bg-card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .theme-toggle-mobile:hover {
background: var(--primary) !important;
color: white !important;
}
.header-logo img {
height: 55px;
transition: transform var(--transition-base);
}
.header-logo:hover img {
transform: scale(1.05);
}
.navbar-nav .nav-link {
font-family: var(--font-heading);
font-weight: 500;
color: var(--gray-700);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
position: relative;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: all var(--transition-base);
transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 80%;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--primary);
background: rgba(10, 113, 147, 0.05);
}
.header-widget {
display: flex;
align-items: center;
gap: var(--space-4);
}
.header-widget a {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-weight: 500;
transition: all var(--transition-fast);
}
/* Profile widget - ลดระยะห่างระหว่างรูปโปรไฟล์กับข้อความ */
a.header-widget {
gap: 3px;
}
a.header-widget img {
margin-right: -3px;
}
.header-widget a:hover {
transform: translateY(-2px);
}
.btn,
button,
[type="button"],
[type="submit"] {
font-family: var(--font-heading);
font-weight: 500;
transition: all var(--transition-fast);
}
.btn-buy,
.buy-btn-box4 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
background: var(--gradient-primary);
color: white !important;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
text-transform: none;
cursor: pointer;
box-shadow: var(--shadow-md), 0 4px 15px -3px rgba(10, 113, 147, 0.4);
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.btn-buy::before,
.buy-btn-box4::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.btn-buy:hover::before,
.buy-btn-box4:hover::before {
left: 100%;
}
.btn-buy:hover,
.buy-btn-box4:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl), 0 8px 25px -5px rgba(10, 113, 147, 0.5);
}
.btn-buy:active,
.buy-btn-box4:active {
transform: translateY(-1px);
}
.btn-more,
.more-btn-box4 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: calc(var(--space-2) - 1px) var(--space-4);
background: #e5e7eb !important;
color: #4b5563 !important;
border: 1px solid #d1d5db;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-more:hover,
.more-btn-box4:hover {
background: #d1d5db !important;
color: #374151 !important;
border-color: #9ca3af;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-category-home {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: white;
color: var(--gray-700);
border: 1px solid var(--gray-200);
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-weight: 500;
font-size: 0.9rem;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
}
.btn-category-home:hover {
background: var(--gray-50);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-category-home.active {
background: var(--gradient-primary);
color: white;
border-color: transparent;
box-shadow: var(--shadow-md), 0 4px 15px -3px rgba(10, 113, 147, 0.3);
}
ul.custom-button-list {
padding: var(--space-4) 0;
gap: var(--space-3);
}
.feature-card {
background: linear-gradient(160deg, #f0f4f8 0%, #e2e8f0 100%);
border-radius: var(--radius-xl);
padding: 12px !important;
box-shadow: 0 2px 10px rgba(71, 85, 105, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid #cbd5e1;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0a7193 0%, #22d3ee 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(10, 113, 147, 0.15), 0 4px 12px rgba(71, 85, 105, 0.1);
border-color: #0a7193;
background: linear-gradient(160deg, #f8fafc 0%, #f0f4f8 100%);
}
.feature-card:hover::before {
opacity: 1;
}
.product-box4 {
background: linear-gradient(160deg, #f0f4f8 0%, #e2e8f0 100%);
border-radius: var(--radius-xl);
box-shadow: 0 2px 10px rgba(71, 85, 105, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
overflow: hidden;
border: 1px solid #cbd5e1;
transition: all var(--transition-base);
}
.product-box4:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(10, 113, 147, 0.15), 0 4px 12px rgba(71, 85, 105, 0.1);
border-color: #0a7193;
background: linear-gradient(160deg, #f8fafc 0%, #f0f4f8 100%);
}
.product-head-box4 {
background: linear-gradient(135deg, #e2e8f0 0%, #f0f4f8 100%);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--gray-100);
}
.product-head-box4 h4 {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
color: var(--gray-800);
margin: 0;
line-height: 1.3;
}
.product-body-box4 {
padding: var(--space-3) var(--space-4);
min-height: 70px;
}
.product-body-box4 p {
font-size: 0.8rem;
color: var(--gray-600);
margin-bottom: var(--space-1);
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.product-body-box4 p i {
color: var(--success);
font-size: 0.85rem;
flex-shrink: 0;
margin-top: 3px;
}
.product-footer-box4 {
padding: var(--space-2) var(--space-4);
background: var(--gray-50);
border-top: 1px solid var(--gray-100);
}
.product-footer-box4 strong {
font-size: 0.7rem;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.price-box4 strong {
font-family: var(--font-heading);
font-size: 0.9rem !important;
font-weight: 700;
color: var(--secondary);
display: block;
}
.price-box4 span {
font-size: 0.75rem !important;
color: var(--gray-400);
text-decoration: line-through;
}
.proce-box4-not-discount {
font-family: var(--font-heading);
font-size: 0.9rem !important;
font-weight: 700;
color: var(--secondary);
}
.product-buttons-box4 {
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: row;
gap: var(--space-2);
}
.border-end-box4 {
border-right: 1px solid var(--gray-200) !important;
}
.account-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-6);
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-100);
}
.card-wallet-home,
.account-card.card-wallet-home {
background: var(--gradient-dark);
color: white;
border: none;
position: relative;
overflow: hidden;
}
.card-wallet-home::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none;
}
.card-wallet-home h5,
.card-wallet-home span,
.card-wallet-home strong {
color: white;
}
.product-disable {
position: relative;
opacity: 0.7;
}
.product-disable::before {
content: "สินค้าหมด";
position: absolute;
top: auto;
bottom: var(--space-3);
left: 50%;
transform: translateX(-50%);
background: rgba(239, 68, 68, 0.9);
color: white;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
z-index: 10;
backdrop-filter: blur(4px);
}
.label-text {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px var(--space-3);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
margin-right: var(--space-2);
}
.label-text.feat {
background: linear-gradient(135deg, rgba(10, 113, 147, 0.1) 0%, rgba(10, 113, 147, 0.05) 100%);
border: 1px solid rgba(10, 113, 147, 0.3);
color: #0a7193;
}
.label-text.feat b {
color: #16a34a;
}
.label-text.order {
background: var(--primary-light);
background: rgba(10, 113, 147, 0.1);
color: var(--primary);
}
.label-text.off {
background: var(--danger-light);
color: var(--danger);
font-weight: 600;
}
.badge {
font-family: var(--font-heading);
font-weight: 600;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
}
.feature-name {
margin-bottom: 6px !important;
}
.feature-name a {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gray-800);
font-size: 1.1rem;
line-height: 1.4;
transition: color var(--transition-fast);
display: block;
}
.feature-name a:hover {
color: var(--primary);
}
.feature-price {
font-family: var(--font-heading);
margin: 4px 0 8px 0;
}
.feature-price span {
font-size: 1rem;
font-weight: 700;
color: var(--secondary);
display: inline-block;
background: linear-gradient(135deg, rgba(10, 113, 147, 0.1) 0%, rgba(10, 113, 147, 0.05) 100%);
border: 1px solid rgba(10, 113, 147, 0.3);
border-radius: 8px;
padding: 6px 14px;
margin-top: 0;
}
.feature-price del {
font-size: 0.8rem;
color: #ef4444 !important;
margin-right: var(--space-2);
display: inline-block;
margin-bottom: 0;
}
.feature-desc {
color: var(--gray-500);
font-size: 0.8rem;
margin: 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.feature-desc i {
color: var(--primary);
margin-right: var(--space-1);
}
.feature-rating {
display: flex;
align-items: center;
gap: var(--space-1);
}
.feature-rating i {
color: var(--gray-300);
font-size: 0.9rem;
}
.feature-rating i.active {
color: var(--warning);
}
.feature-rating a {
font-size: 0.8rem;
color: var(--gray-500);
margin-left: var(--space-2);
}
.section {
padding: var(--space-12) 0;
}
.feature-card .feature-content > div:has(.label-text.feat),
.feature-card .feature-content > div:has(.label-text.order) {
display: inline-flex;
align-items: center;
margin-right: 15px;
vertical-align: middle;
}
.feature-price {
display: inline-flex !important;
align-items: center;
vertical-align: middle;
}
.feature-card .feature-content {
padding: 10px 12px !important;
}
.label-text.feat,
.label-text.order {
margin-bottom: 0;
white-space: nowrap;
}
.feature-price span {
white-space: nowrap;
}
.feature-desc {
margin-top: 8px;
}
.btn-more,
.btn-buy {
padding: 10px 0;
font-weight: 600;
}
.feature-part {
padding: var(--space-0) 0 var(--space-16);
}
.section-head,
.section-title {
text-align: center;
margin-bottom: var(--space-10);
}
.section-head h2 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--gray-800);
position: relative;
display: inline-block;
padding-bottom: var(--space-3);
}
.section-head h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
}
.footer-part {
background: var(--gradient-dark);
padding: var(--space-16) 0 var(--space-8);
color: white;
position: relative;
}
.footer-part::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.footer-part h5 {
color: white;
font-family: var(--font-heading);
font-weight: 600;
margin-bottom: var(--space-5);
}
.footer-part p,
.footer-part li,
.footer-part a {
color: rgba(255,255,255,0.7);
}
.footer-part a:hover {
color: var(--primary-light);
}
.footer-copytext {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--space-6);
margin-top: var(--space-10);
text-align: center;
color: rgba(255,255,255,0.5);
}
.footer-copytext a {
color: var(--primary-light);
}
.modal-content {
border: none;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
overflow: visible;
position: relative;
}
.modal-header {
background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
border-bottom: 1px solid var(--gray-100);
padding: var(--space-5);
position: relative;
}
.modal-title {
font-family: var(--font-heading);
font-weight: 600;
}
.modal-body {
padding: var(--space-6);
max-height: 70vh;
overflow-y: auto;
}
.modal-footer {
background: var(--gray-50);
border-top: 1px solid var(--gray-100);
padding: var(--space-4) var(--space-5);
}
.btn-close {
position: absolute !important;
top: 15px !important;
right: 15px !important;
z-index: 1060 !important;
opacity: 0.7;
transition: opacity var(--transition-fast);
background-color: white;
border-radius: 50%;
padding: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.btn-close:hover {
opacity: 1;
}
.form-control,
.form-select {
border: 1px solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-family: var(--font-body);
transition: all var(--transition-fast);
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(10, 113, 147, 0.1);
outline: none;
}
input::placeholder {
color: var(--gray-400);
}
.notice-box,
.account-card.notice-box {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
border: none;
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.notice-box::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: float 6s ease-in-out infinite;
}
.skeleton {
background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-100);
}
::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--gray-400);
}
#top-menu-left,
#top-menu-right {
z-index: 100;
}
#top-menu-left li a,
#top-menu-right li a {
background: white;
box-shadow: var(--shadow-lg);
transition: all var(--transition-base);
}
#top-menu-left li a:hover,
#top-menu-right li a:hover {
transform: translateX(5px);
}
#top-menu-left li a.active,
#top-menu-right li a.active {
background: var(--gradient-primary);
}
.posterd {
background: var(--gradient-primary);
border-radius: var(--radius-2xl);
padding: var(--space-8);
position: relative;
overflow: hidden;
}
.posterd::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
}
.box-intro {
background: white;
box-shadow: var(--shadow-xl);
border-radius: var(--radius-xl);
}
.feature-part > .container > .row,
.product-listing .row {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 1199px) {
:root {
--space-12: 2.5rem;
--space-16: 3rem;
}
}
@media (max-width: 991px) {
.feature-part {
padding: var(--space-6) 0 var(--space-12);
}
.product-body-box4 {
min-height: auto;
}
}
@media (max-width: 767px) {
:root {
--space-8: 1.5rem;
--space-10: 2rem;
--space-12: 2rem;
--space-16: 2.5rem;
}
.feature-card {
padding: var(--space-4);
}
.product-buttons-box4 {
padding: 10px 15px !important;
}
.btn-buy,
.buy-btn-box4,
.btn-more,
.more-btn-box4 {
padding: var(--space-2) var(--space-3);
font-size: 0.85rem;
}
.header-logo img {
height: 45px;
}
ul.custom-button-list {
gap: var(--space-2);
}
.btn-category-home {
padding: var(--space-2) var(--space-3);
font-size: 0.85rem;
}
}
@media (max-width: 575px) {
.feature-price span {
font-size: 0.9rem;
}
.price-box4 strong,
.proce-box4-not-discount {
font-size: 0.9rem;
}
.product-head-box4 h4 {
font-size: 0.9rem;
}
}
@media (prefers-color-scheme: dark) {
}
@media print {
.header-part,
.footer-part,
#top-menu-left,
#top-menu-right,
.btn-buy,
.btn-more {
display: none !important;
}
body {
background: white;
}
.feature-card,
.product-box4 {
box-shadow: none;
border: 1px solid var(--gray-300);
break-inside: avoid;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.bg-primary { background: var(--gradient-primary) !important; }
.bg-secondary { background: var(--gradient-secondary) !important; }
.shadow-glow { box-shadow: var(--shadow-glow) !important; }
.hover-lift {
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.hover-glow:hover {
box-shadow: var(--shadow-glow);
}
.theme-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: var(--bg-tertiary);
color: var(--text-primary);
cursor: pointer;
transition: all 0.3s ease;
margin-left: 10px;
}
.theme-toggle:hover {
background: var(--primary);
color: white;
transform: scale(1.1);
}
.theme-toggle i {
font-size: 18px;
transition: transform 0.3s ease;
}
.theme-toggle:hover i {
transform: rotate(15deg);
}
[data-theme="dark"] .theme-toggle .fa-moon {
display: none;
}
[data-theme="dark"] .theme-toggle .fa-sun {
display: block;
}
[data-theme="light"] .theme-toggle .fa-sun,
:root:not([data-theme="dark"]) .theme-toggle .fa-sun {
display: none;
}
[data-theme="light"] .theme-toggle .fa-moon,
:root:not([data-theme="dark"]) .theme-toggle .fa-moon {
display: block;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .product-box4,
[data-theme="dark"] .card {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .product-box4:hover {
background: var(--bg-card) !important;
border-color: rgba(34, 211, 238, 0.4) !important;
box-shadow: 0 8px 25px rgba(10, 113, 147, 0.3), 0 0 0 1px rgba(34, 211, 238, 0.2) !important;
}
[data-theme="dark"] .feature-name,
[data-theme="dark"] .product-head-box4 h4,
[data-theme="dark"] .feature-name a,
[data-theme="dark"] .feature-card h4,
[data-theme="dark"] .feature-card h4 a {
color: #94a3b8 !important;
}
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .feature-desc,
[data-theme="dark"] .product-body-box4 p,
[data-theme="dark"] p {
color: var(--text-tertiary) !important;
}
[data-theme="dark"] .home-heading h2 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .home-heading p {
color: var(--text-tertiary) !important;
}
[data-theme="dark"] .header-main-area,
[data-theme="dark"] header {
background: var(--bg-primary) !important;
border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link {
color: var(--text-primary) !important;
}
[data-theme="dark"] .header-form input,
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .header-form input::placeholder,
[data-theme="dark"] input::placeholder {
color: var(--text-muted) !important;
}
[data-theme="dark"] .recharge-card,
[data-theme="dark"] .payment-card,
[data-theme="dark"] .card-recharge {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .recharge-card .card-body,
[data-theme="dark"] .payment-card .card-body {
background: var(--bg-card) !important;
}
[data-theme="dark"] .recharge-card input,
[data-theme="dark"] .payment-card input,
[data-theme="dark"] .recharge-card .form-control,
[data-theme="dark"] .payment-card .form-control {
background: var(--bg-tertiary) !important;
border: 1px solid #475569 !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .recharge-card label,
[data-theme="dark"] .payment-card label {
color: var(--text-primary) !important;
}
[data-theme="dark"] .input--style-4,
[data-theme="dark"] .card-4 input,
[data-theme="dark"] .card-4 select,
[data-theme="dark"] .wrapper--w680 input,
[data-theme="dark"] .wrapper--w680 select {
background: var(--bg-tertiary, #334155) !important;
border: 1px solid #475569 !important;
color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .input--style-4::placeholder {
color: var(--text-muted, #64748b) !important;
}
[data-theme="dark"] .card-4,
[data-theme="dark"] .card-4 .card-body {
background: var(--bg-card, #1e293b) !important;
border-color: var(--border-color, #334155) !important;
}
[data-theme="dark"] .card-4 .label,
[data-theme="dark"] .card-4 label {
color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .input-group input,
[data-theme="dark"] .input-group select {
background: var(--bg-tertiary, #334155) !important;
border: 1px solid #475569 !important;
color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .profile-part .account-card input,
[data-theme="dark"] .profile-part .account-card select {
background: var(--bg-tertiary, #334155) !important;
border: 1px solid #475569 !important;
color: var(--text-primary, #f1f5f9) !important;
}
[data-theme="dark"] .btn-more,
[data-theme="dark"] .more-btn-box4 {
background: var(--bg-tertiary) !important;
color: #94a3b8 !important;
border-color: var(--border-dark) !important;
}
[data-theme="dark"] .btn-more:hover,
[data-theme="dark"] .more-btn-box4:hover {
background: var(--bg-hover) !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .buy-btn-box4,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-buy {
background: linear-gradient(135deg, #0a7193 0%, #0c8eb8 100%) !important;
color: white !important;
border: none !important;
}
[data-theme="dark"] .buy-btn-box4:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-buy:hover {
color: white !important;
}
[data-theme="dark"] .category-banner,
[data-theme="dark"] .home-heading-banner {
background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .modal-content {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-header {
background: var(--bg-tertiary) !important;
border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-body {
background: var(--bg-card) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body * {
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body a {
color: var(--primary) !important;
}
[data-theme="dark"] .modal-footer {
background: var(--bg-tertiary) !important;
border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-title {
color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-close {
filter: invert(1);
}
[data-theme="dark"] .modal-body .btn,
[data-theme="dark"] .modal-body button {
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body .btn-outline-secondary,
[data-theme="dark"] .modal-body .btn-light,
[data-theme="dark"] .modal-body [class*="favorite"],
[data-theme="dark"] .modal-body [class*="wishlist"] {
background: var(--bg-tertiary) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body .btn-outline-secondary:hover,
[data-theme="dark"] .modal-body .btn-light:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .modal-body input,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body textarea {
background: var(--bg-input) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body input::placeholder {
color: var(--text-muted) !important;
}
[data-theme="dark"] .modal-body table {
background: transparent !important;
}
[data-theme="dark"] .modal-body table td,
[data-theme="dark"] .modal-body table th {
background: transparent !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body .card {
background: var(--bg-tertiary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-body [style*="background: white"],
[data-theme="dark"] .modal-body [style*="background:#fff"],
[data-theme="dark"] .modal-body [style*="background: #fff"],
[data-theme="dark"] .modal-body [style*="background-color: white"],
[data-theme="dark"] .modal-body [style*="background-color:#fff"],
[data-theme="dark"] .modal-body [style*="background-color: #fff"] {
background: var(--bg-tertiary) !important;
background-color: var(--bg-tertiary) !important;
}
[data-theme="dark"] .modal-body .quantity-input,
[data-theme="dark"] .modal-body .qty-input,
[data-theme="dark"] .modal-body input[type="number"] {
background: var(--bg-input) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-body .btn-minus,
[data-theme="dark"] .modal-body .btn-plus,
[data-theme="dark"] .modal-body .quantity-btn {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-body .order-info,
[data-theme="dark"] .modal-body .order-summary,
[data-theme="dark"] .modal-body .purchase-info {
background: var(--bg-tertiary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-body .social-share a,
[data-theme="dark"] .modal-body [class*="share"] a {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] table,
[data-theme="dark"] .table {
color: var(--text-primary) !important;
}
[data-theme="dark"] th,
[data-theme="dark"] td {
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] thead {
background: var(--bg-tertiary) !important;
}
[data-theme="dark"] tbody tr:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .dropdown-menu {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
z-index: 1060 !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .dropdown-item {
color: var(--text-primary) !important;
}
[data-theme="dark"] .dropdown-item:hover {
background: var(--bg-hover) !important;
}
[data-theme="dark"] .alert {
border-color: var(--border-color) !important;
}
[data-theme="dark"] .breadcrumb {
background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .breadcrumb-item a {
color: var(--primary) !important;
}
[data-theme="dark"] .breadcrumb-item.active {
color: var(--text-muted) !important;
}
[data-theme="dark"] .pagination .page-link {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .pagination .page-item.active .page-link {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: white !important;
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .filter-box {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .feature-price span {
color: #22d3ee !important;
background: linear-gradient(135deg, rgba(10, 113, 147, 0.25) 0%, rgba(10, 113, 147, 0.15) 100%) !important;
border: 1px solid rgba(34, 211, 238, 0.3) !important;
}
[data-theme="dark"] .price-box4 strong,
[data-theme="dark"] .proce-box4-not-discount {
color: var(--primary) !important;
}
[data-theme="dark"] .feature-price del {
color: #ef4444 !important;
}
.product-price del,
.feature-price del,
.standard-price del,
.view-price del,
.price-box4 del,
del.old-price,
.old-price {
color: #ef4444 !important;
}
[data-theme="dark"] .product-price del,
[data-theme="dark"] .standard-price del,
[data-theme="dark"] .view-price del,
[data-theme="dark"] .price-box4 del,
[data-theme="dark"] del.old-price,
[data-theme="dark"] .old-price {
color: #ef4444 !important;
}
[data-theme="dark"] .stock-badge-card {
background: rgba(239, 68, 68, 0.2) !important;
}
[data-theme="dark"] .label-text.feat {
background: rgba(10, 113, 147, 0.2) !important;
color: #0a7193 !important;
border: 1px solid rgba(10, 113, 147, 0.3);
}
[data-theme="dark"] .label-text.feat b {
color: #0c8eb8 !important;
}
[data-theme="dark"] .label-text.order {
background: rgba(10, 113, 147, 0.2) !important;
color: #0a7193 !important;
}
[data-theme="dark"] .label-text.off {
background: rgba(239, 68, 68, 0.2) !important;
color: #fca5a5 !important;
}
[data-theme="dark"] .badge.bg-primary {
background: rgba(10, 113, 147, 0.3) !important;
color: #0a7193 !important;
}
[data-theme="dark"] a:not(.btn):not(.buy-btn-box4):not(.more-btn-box4) {
color: var(--primary);
}
[data-theme="dark"] a:not(.btn):hover {
color: var(--primary-light);
}
[data-theme="dark"] ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--border-dark);
border-radius: 5px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
body,
.feature-card,
.product-box4,
.card,
.modal-content,
header,
input,
textarea,
select,
.btn {
transition: background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease;
}
[data-theme="dark"] .account-card {
background: #1a2332 !important;
border-color: var(--border-color) !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
[data-theme="dark"] .account-card [style*="background"],
[data-theme="dark"] .account-card [style*="background-color"] {
background: transparent !important;
background-color: transparent !important;
}
[data-theme="dark"] .account-card,
[data-theme="dark"] .account-card * {
color: #94a3b8 !important;
}
[data-theme="dark"] .account-card h1,
[data-theme="dark"] .account-card h2,
[data-theme="dark"] .account-card h3,
[data-theme="dark"] .account-card h4,
[data-theme="dark"] .account-card h5,
[data-theme="dark"] .account-card h6,
[data-theme="dark"] .account-card strong,
[data-theme="dark"] .account-card b {
color: #cbd5e1 !important;
}
[data-theme="dark"] .account-card p,
[data-theme="dark"] .account-card span,
[data-theme="dark"] .account-card li,
[data-theme="dark"] .account-card td,
[data-theme="dark"] .account-card th,
[data-theme="dark"] .account-card div {
color: #94a3b8 !important;
}
[data-theme="dark"] .account-card a {
color: #0ea5e9 !important;
}
[data-theme="dark"] .account-card a:hover {
color: #38bdf8 !important;
}
[data-theme="dark"] .account-card .alert-warning,
[data-theme="dark"] .account-card [style*="background: #fff3cd"],
[data-theme="dark"] .account-card [style*="background-color: #fff3cd"],
[data-theme="dark"] .account-card [style*="rgb(255, 243, 205)"] {
background: rgba(245, 158, 11, 0.15) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-theme="dark"] .account-card .alert-warning *,
[data-theme="dark"] .account-card [style*="background: #fff3cd"] *,
[data-theme="dark"] .account-card [style*="background-color: #fff3cd"] * {
color: #fbbf24 !important;
}
[data-theme="dark"] .account-card .alert-danger,
[data-theme="dark"] .account-card [style*="background: #f8d7da"],
[data-theme="dark"] .account-card [style*="background-color: #f8d7da"],
[data-theme="dark"] .account-card [style*="rgb(248, 215, 218)"] {
background: rgba(239, 68, 68, 0.2) !important;
border-color: rgba(239, 68, 68, 0.4) !important;
color: #fca5a5 !important;
}
[data-theme="dark"] .account-card .alert-success,
[data-theme="dark"] .account-card [style*="background: #d1e7dd"],
[data-theme="dark"] .account-card [style*="background-color: #d1e7dd"] {
background: rgba(16, 185, 129, 0.2) !important;
border-color: rgba(16, 185, 129, 0.4) !important;
color: #6ee7b7 !important;
}
[data-theme="dark"] .account-card .alert-info,
[data-theme="dark"] .account-card [style*="background: #cff4fc"],
[data-theme="dark"] .account-card [style*="background-color: #cff4fc"] {
background: rgba(59, 130, 246, 0.2) !important;
border-color: rgba(59, 130, 246, 0.4) !important;
color: #93c5fd !important;
}
[data-theme="dark"] .account-card table {
color: var(--text-primary) !important;
}
[data-theme="dark"] .account-card table td,
[data-theme="dark"] .account-card table th {
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .account-card a {
color: var(--primary) !important;
}
[data-theme="dark"] .account-card a:hover {
color: var(--primary-light) !important;
}
[data-theme="dark"] .home-heading-banner,
[data-theme="dark"] .category-banner {
background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .home-heading-banner h2,
[data-theme="dark"] .category-banner h2 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .widget-box,
[data-theme="dark"] .tool-card {
background: var(--bg-card) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:#fff"],
[data-theme="dark"] div[style*="background-color: #fff"],
[data-theme="dark"] div[style*="background: rgb(255"],
[data-theme="dark"] div[style*="background-color: rgb(255"],
[data-theme="dark"] section[style*="background: white"],
[data-theme="dark"] section[style*="background:#fff"],
[data-theme="dark"] section[style*="background: #fff"] {
background: var(--bg-card) !important;
background-color: var(--bg-card) !important;
}
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"] {
color: var(--text-primary) !important;
}
.payment-container a[href*="cancelqr"],
a[href*="cancelqr"],
a[href*="cancelqrline"] {
display: inline-block;
padding: 10px 24px;
background: transparent !important;
color: #dc2626 !important;
border: 1px solid #dc2626 !important;
border-radius: 8px;
font-weight: 600;
text-decoration: none !important;
transition: all 0.3s ease;
margin-bottom: 15px;
}
.payment-container a[href*="cancelqr"]:hover,
a[href*="cancelqr"]:hover,
a[href*="cancelqrline"]:hover {
background: rgba(220, 38, 38, 0.1) !important;
color: #b91c1c !important;
border-color: #b91c1c !important;
}
.btn--red {
background: transparent !important;
color: #dc2626 !important;
border: 1px solid #dc2626 !important;
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
}
.btn--red:hover {
background: rgba(220, 38, 38, 0.1) !important;
color: #b91c1c !important;
border-color: #b91c1c !important;
}
[data-theme="dark"] .payment-container a[href*="cancelqr"],
[data-theme="dark"] a[href*="cancelqr"],
[data-theme="dark"] a[href*="cancelqrline"] {
background: transparent !important;
color: #f87171 !important;
border: 1px solid rgba(248, 113, 113, 0.5) !important;
}
[data-theme="dark"] .payment-container a[href*="cancelqr"]:hover,
[data-theme="dark"] a[href*="cancelqr"]:hover,
[data-theme="dark"] a[href*="cancelqrline"]:hover {
background: rgba(248, 113, 113, 0.1) !important;
color: #fca5a5 !important;
border-color: rgba(252, 165, 165, 0.5) !important;
}
[data-theme="dark"] .btn--red {
background: transparent !important;
color: #f87171 !important;
border: 1px solid rgba(248, 113, 113, 0.5) !important;
}
[data-theme="dark"] .btn--red:hover {
background: rgba(248, 113, 113, 0.1) !important;
color: #fca5a5 !important;
}
.payment-container {
text-align: center;
}
.payment-container .alert,
.payment-action .alert {
background: transparent !important;
border: none !important;
padding: 8px 0;
margin: 5px 0;
text-align: center;
}
.payment-container .alert .alert,
.payment-action .alert .alert {
background: rgba(254, 242, 242, 0.8) !important;
border: 1px solid rgba(220, 38, 38, 0.2) !important;
border-radius: 8px;
padding: 15px 20px;
margin: 15px auto;
max-width: 500px;
text-align: center;
line-height: 1.6;
}
.payment-container .alert span[style*="color:red"],
.payment-container .alert span[style*="color: red"],
.payment-action span[style*="color:red"],
.payment-action span[style*="color: red"] {
display: block;
font-size: 13px;
line-height: 1.7;
color: #b91c1c !important;
}
.payment-container .label[style*="color:red"],
.payment-action .label[style*="color:red"] {
display: block;
background: rgba(254, 242, 242, 0.6) !important;
border: 1px solid rgba(220, 38, 38, 0.15) !important;
border-radius: 8px;
padding: 12px 18px;
margin: 10px auto;
max-width: 520px;
font-size: 12px;
line-height: 1.6;
color: #991b1b !important;
text-align: center;
}
.payment-container hr,
.payment-action hr {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 15px auto;
max-width: 400px;
}
[data-theme="dark"] .payment-container .alert .alert,
[data-theme="dark"] .payment-action .alert .alert {
background: rgba(127, 29, 29, 0.15) !important;
border: 1px solid rgba(248, 113, 113, 0.2) !important;
}
[data-theme="dark"] .payment-container .alert span[style*="color:red"],
[data-theme="dark"] .payment-container .alert span[style*="color: red"],
[data-theme="dark"] .payment-action span[style*="color:red"],
[data-theme="dark"] .payment-action span[style*="color: red"] {
color: #fca5a5 !important;
}
[data-theme="dark"] .payment-container .label[style*="color:red"],
[data-theme="dark"] .payment-action .label[style*="color:red"] {
background: rgba(127, 29, 29, 0.1) !important;
border: 1px solid rgba(248, 113, 113, 0.15) !important;
color: #fca5a5 !important;
}
[data-theme="dark"] .payment-container hr,
[data-theme="dark"] .payment-action hr {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.profile-part .wrapper--w680 {
max-width: 100%;
width: 100%;
}
.profile-part .card-4 {
max-width: 680px;
margin: 0 auto;
}
.profile-part .account-card > .row {
width: 100%;
margin: 0;
}
.profile-part .account-card > .row > .col-lg-12 {
padding: 0;
}
.profile-part .table-responsive {
width: 100%;
overflow-x: auto;
}
.qr-container {
position: relative;
display: inline-block;
}
[data-theme="dark"] .user-form-card {
background: var(--bg-card) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .user-form-title h2 {
color: var(--primary) !important;
}
[data-theme="dark"] .user-form-title p {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .user-form-card .form-control,
[data-theme="dark"] .user-form .form-control,
[data-theme="dark"] .profile-part .form-control {
background: #1e293b !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .user-form-card .form-control::placeholder,
[data-theme="dark"] .user-form .form-control::placeholder,
[data-theme="dark"] .profile-part .form-control::placeholder {
color: #94a3b8 !important;
}
[data-theme="dark"] .user-form-card .form-control:focus,
[data-theme="dark"] .user-form .form-control:focus,
[data-theme="dark"] .profile-part .form-control:focus {
background: #1e293b !important;
border-color: #0891b2 !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1) !important;
}
[data-theme="dark"] .user-form-card label,
[data-theme="dark"] .user-form label,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .profile-part label {
color: #f1f5f9 !important;
}
[data-theme="dark"] .security-badge,
[data-theme="dark"] .security-info,
[data-theme="dark"] .password-policy {
background: rgba(34, 211, 238, 0.1) !important;
border-color: rgba(34, 211, 238, 0.3) !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .security-badge i,
[data-theme="dark"] .security-info i {
color: #22d3ee !important;
}
[data-theme="dark"] .password-toggle i {
color: #94a3b8 !important;
}
[data-theme="dark"] .form-check-label {
color: #f1f5f9 !important;
}
[data-theme="dark"] .user-form-card a,
[data-theme="dark"] .forgot-password-link {
color: #22d3ee !important;
}
[data-theme="dark"] .google-signin-wrapper {
background: transparent !important;
}
[data-theme="dark"] .g_id_signin {
filter: none !important;
}
[data-theme="dark"] .or-separator,
[data-theme="dark"] .divider-text,
[data-theme="dark"] .social-login-divider {
color: #94a3b8 !important;
}
[data-theme="dark"] .security-footer,
[data-theme="dark"] .security-footer span {
color: #94a3b8 !important;
}
[data-theme="dark"] .security-footer i {
color: #22c55e !important;
}
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-warning {
background: rgba(34, 211, 238, 0.1) !important;
border-color: rgba(34, 211, 238, 0.3) !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .registration-steps span,
[data-theme="dark"] .step-indicator span {
color: #94a3b8 !important;
}
[data-theme="dark"] .registration-steps span.active,
[data-theme="dark"] .step-indicator span.active {
color: #22d3ee !important;
}
[data-theme="dark"] .password-requirements,
[data-theme="dark"] .password-requirements li {
color: #94a3b8 !important;
background: transparent !important;
}
[data-theme="dark"] .btn-otp {
background: #0891b2 !important;
color: #ffffff !important;
}
[data-theme="dark"] a[href*="policy"],
[data-theme="dark"] a[href*="terms"],
[data-theme="dark"] a[href*="dieu-khoan"],
[data-theme="dark"] a[href*="chinh-sach"] {
color: #22d3ee !important;
}
[data-theme="dark"] .google-signin-wrapper {
border-top-color: #334155 !important;
}
[data-theme="dark"] .google-signin-wrapper::before {
background: #1e293b !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .g_id_signin {
background: #1e293b !important;
border-radius: 8px !important;
padding: 2px !important;
}
[data-theme="dark"] .g_id_signin > div,
[data-theme="dark"] .g_id_signin > div > div {
background: #374151 !important;
border-radius: 6px !important;
}
[data-theme="dark"] .g_id_signin iframe {
color-scheme: dark !important;
}
.swal2-container {
z-index: 99999999 !important;
}
.swal2-popup {
z-index: 99999999 !important;
}
.swal2-backdrop-show {
z-index: 99999998 !important;
}
.card-4 {
background: var(--bg-card, #ffffff);
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
overflow: hidden;
max-width: 520px;
margin: 0 auto;
}
.card-4 .card-body {
padding: 24px 28px;
}
.card-4 > div[style*="background-color:#113566"],
.card-4 > div[style*="background-color: #113566"] {
background: linear-gradient(135deg, #0f3460 0%, #16537e 50%, #1a6b9a 100%) !important;
padding: 20px 16px !important;
border-radius: 0 !important;
}
.card-4 > div[style*="background-color:#113566"] img,
.card-4 > div[style*="background-color: #113566"] img {
max-width: 180px !important;
height: auto !important;
}
.card-4 .input-group {
margin-bottom: 20px;
}
.card-4 .label,
.card-4 label.label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary, #4b5563);
margin-bottom: 8px;
}
.card-4 .input--style-4,
.card-4 input.input--style-4,
.card-4 input[type="number"] {
width: 100%;
padding: 12px 16px;
font-size: 15px;
font-weight: 500;
border: 1px solid var(--border-color, #d1d5db);
border-radius: 8px;
background: var(--bg-input, #ffffff);
color: var(--text-primary, #1f2937);
transition: all 0.2s ease;
}
.card-4 .input--style-4:focus,
.card-4 input.input--style-4:focus,
.card-4 input[type="number"]:focus {
outline: none;
border-color: var(--primary, #0a7193);
box-shadow: 0 0 0 3px rgba(10, 113, 147, 0.1);
}
.card-4 .p-t-15 {
padding-top: 20px;
border-top: 1px solid var(--border-color, #e5e7eb);
margin-top: 12px;
}
.card-4 .p-t-15 .label {
font-size: 13px;
line-height: 1.6;
margin-bottom: 8px;
padding: 10px 14px;
border-radius: 6px;
border: 1px solid var(--border-color, #e5e7eb);
background: var(--bg-card, #ffffff);
text-align: center;
}
.card-4 .p-t-15 .label:first-of-type {
color: var(--primary, #0a7193) !important;
background: var(--bg-card, #ffffff) !important;
border: 1px solid var(--border-color, #e5e7eb) !important;
}
.card-4 .p-t-15 .label[style*="color:red"],
.card-4 .p-t-15 .label[style*="color: red"] {
background: rgba(254, 242, 242, 0.8) !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
color: #dc2626 !important;
}
.card-4 .p-t-15 .label:not([style*="color:red"]):not(:first-of-type) {
color: var(--text-tertiary, #6b7280);
}
.card-4 .btn--green,
.card-4 .btn--radius-2.btn--green {
display: block;
width: 100%;
padding: 14px 20px;
margin-top: 16px;
font-size: 15px;
font-weight: 600;
text-transform: none;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.card-4 .btn--green:hover,
.card-4 .btn--radius-2.btn--green:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.card-4 .btn--green:disabled {
background: #9ca3af;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.card-4 .rs-select2 select,
.card-4 select[name="amount"] {
width: 100%;
padding: 12px 16px;
font-size: 15px;
font-weight: 500;
border: 1px solid var(--border-color, #d1d5db);
border-radius: 8px;
background: var(--bg-input, #ffffff);
color: var(--text-primary, #1f2937);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
}
.wrapper--w680 {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
[data-theme="dark"] .card-4 {
background: #1e293b !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .card-4 .card-body {
background: #1e293b !important;
}
[data-theme="dark"] .card-4 .label,
[data-theme="dark"] .card-4 label.label {
color: #cbd5e1 !important;
}
[data-theme="dark"] .card-4 .input--style-4,
[data-theme="dark"] .card-4 input.input--style-4,
[data-theme="dark"] .card-4 input[type="number"] {
background: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .card-4 .input--style-4:focus,
[data-theme="dark"] .card-4 input[type="number"]:focus {
border-color: #0891b2 !important;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
}
[data-theme="dark"] .card-4 .p-t-15 {
border-top-color: #334155 !important;
}
[data-theme="dark"] .card-4 .p-t-15 .label {
background: #0f172a !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
[data-theme="dark"] .card-4 .p-t-15 .label:first-of-type {
background: #0f172a !important;
border-color: #334155 !important;
color: #22d3ee !important;
}
[data-theme="dark"] .card-4 .p-t-15 .label[style*="color:red"],
[data-theme="dark"] .card-4 .p-t-15 .label[style*="color: red"] {
background: rgba(239, 68, 68, 0.1) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
color: #f87171 !important;
}
[data-theme="dark"] .card-4 .rs-select2 select,
[data-theme="dark"] .card-4 select[name="amount"] {
background-color: #0f172a !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}
.inner-section,
.profile-part,
section.py-5,
section.inner-section,
main,
.main-content {
position: relative;
z-index: 1;
}
.header-part .container,
.navbar .container {
z-index: auto !important;
}
.header-part {
z-index: 9999 !important;
position: sticky !important;
}
@media (min-width: 992px) {
.header-part .dropdown-position-list,
.header-part .dropdown-list,
.header-part .megamenu,
.header-part ul.dropdown-position-list,
.header-part .navbar-item .dropdown-position-list,
.header-part .dropdown-megamenu .megamenu,
.navbar-nav .dropdown-position-list,
.navbar-nav .megamenu {
z-index: 99999 !important;
position: absolute !important;
}
}
.nav-sidebar .dropdown-position-list,
.nav-sidebar .dropdown-list,
.nav-sidebar ul.dropdown-position-list,
.nav-sidebar .nav-link-list {
position: relative !important;
z-index: auto !important;
background: transparent !important;
box-shadow: none !important;
}

.header-top {
display: none !important;
}

/* =====================================================
   Product Order Table - Mobile Responsive
   ===================================================== */

/* ปรับ textarea ในตารางให้แสดงผลดีขึ้น */
.table-wrapper table textarea.form-control {
min-width: 200px;
max-width: 100%;
resize: vertical;
}

/* Mobile: ปรับตารางให้เลื่อนแนวนอนได้ */
@media (max-width: 767px) {
.table-scroll.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ยกเลิก text-nowrap บนมือถือ */
.table-wrapper table.text-nowrap {
    white-space: normal;
}

/* ปรับขนาด textarea ช่องบัญชี */
.table-wrapper table textarea.form-control {
    min-width: 180px;
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    word-break: break-all;
}

/* ปรับขนาดคอลัมน์ */
.table-wrapper table th,
.table-wrapper table td {
    padding: 8px 6px;
    font-size: 13px;
}

/* ซ่อน checkbox column ถ้าจอเล็กมาก */
@media (max-width: 480px) {
    .table-wrapper table th:first-child,
    .table-wrapper table td:first-child {
        display: none;
    }
}

/* ปรับปุ่ม Copy */
.table-wrapper table .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
.table-wrapper table textarea.form-control {
    min-width: 250px;
}
}