/* ═══════════════════════════════════════════════════
 LĨNH NAM GROUP — Premium Base CSS
 Version: 1.0 | 2026-03-23
 Applied to ALL pages for consistent premium feel
═══════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
::selection { background: rgba(139,26,26,0.25); color: #1a1a1a; }
::-moz-selection { background: rgba(139,26,26,0.25); color: #1a1a1a; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, rgba(201,168,76,0.3), rgba(139,26,26,0.3));
 border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }
body {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
.section-title, h2.section-heading {
 position: relative;
 display: inline-block;
}
.section-title::after, h2.section-heading::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 2px;
 background: linear-gradient(90deg, #C9A84C, #8B1A1A);
 border-radius: 1px;
}
@keyframes fadeInUp {
 from { opacity: 0; transform: translateY(24px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes shimmer {
 0% { background-position: -200% center; }
 100% { background-position: 200% center; }
}
.fade-in {
 animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
.fade-in:nth-child(2) { animation-delay: 0.1s; }
.fade-in:nth-child(3) { animation-delay: 0.2s; }
.fade-in:nth-child(4) { animation-delay: 0.3s; }
.fade-in:nth-child(5) { animation-delay: 0.4s; }
.fade-in:nth-child(6) { animation-delay: 0.5s; }
.premium-card {
 background: #fff;
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0,0,0,0.06);
 transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.premium-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
.premium-card img {
 transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.premium-card:hover img {
 transform: scale(1.05);
}
.btn-premium {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 14px 32px;
 background: linear-gradient(135deg, #8B1A1A, #6B1010);
 color: #fff;
 border: none;
 border-radius: 50px;
 font-family: 'Inter', sans-serif;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.5px;
 cursor: pointer;
 transition: all 0.3s ease;
 text-decoration: none;
}
.btn-premium:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(139,26,26,0.3);
 background: linear-gradient(135deg, #a52020, #8B1A1A);
}
.btn-premium-outline {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 13px 32px;
 background: transparent;
 color: #8B1A1A;
 border: 2px solid rgba(139,26,26,0.3);
 border-radius: 50px;
 font-family: 'Inter', sans-serif;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 text-decoration: none;
}
.btn-premium-outline:hover {
 background: rgba(139,26,26,0.05);
 border-color: #8B1A1A;
 transform: translateY(-2px);
}
.tag-premium {
 display: inline-block;
 padding: 4px 12px;
 background: rgba(139,26,26,0.08);
 color: #8B1A1A;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-radius: 50px;
 font-family: 'Inter', sans-serif;
}
.separator-gold {
 width: 60px;
 height: 2px;
 background: linear-gradient(90deg, #C9A84C, rgba(201,168,76,0.2));
 margin: 24px auto;
 border-radius: 1px;
}
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.navbar {
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
}
#backToTop {
 transition: all 0.3s ease !important;
 border-radius: 50% !important;
}
#backToTop:hover {
 transform: translateY(-3px) !important;
 box-shadow: 0 4px 16px rgba(139,26,26,0.3) !important;
}
.img-hover-zoom {
 overflow: hidden;
 border-radius: 12px;
}
.img-hover-zoom img {
 transition: transform 0.5s ease;
}
.img-hover-zoom:hover img {
 transform: scale(1.06);
}
.skeleton {
 background: linear-gradient(90deg, #f0ebe3 25%, #e8e0d4 50%, #f0ebe3 75%);
 background-size: 200% 100%;
 animation: shimmer 1.5s infinite;
 border-radius: 8px;
}
@media print {
 .navbar, .footer, #backToTop, #cookieBanner, .cookie-banner { display: none !important; }
 body { font-size: 12pt; }
 a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}
/* ═══════════════════════════════════════════════════
 PREMIUM V2 ENHANCEMENTS — Modern UI Upgrade
 2026-03-26
═══════════════════════════════════════════════════ */
@keyframes meshMove1 {
 0%, 100% { transform: translate(0, 0) scale(1); }
 25% { transform: translate(5%, 10%) scale(1.1); }
 50% { transform: translate(-5%, 5%) scale(0.95); }
 75% { transform: translate(8%, -5%) scale(1.05); }
}
@keyframes meshMove2 {
 0%, 100% { transform: translate(0, 0) scale(1); }
 25% { transform: translate(-8%, -5%) scale(1.05); }
 50% { transform: translate(6%, -8%) scale(1.1); }
 75% { transform: translate(-3%, 10%) scale(0.95); }
}
@keyframes meshMove3 {
 0%, 100% { transform: translate(0, 0) scale(1.05); }
 25% { transform: translate(10%, 5%) scale(0.95); }
 50% { transform: translate(-8%, -10%) scale(1.1); }
 75% { transform: translate(5%, 8%) scale(1); }
}
.mesh-gradient-bg {
 position: relative;
 overflow: hidden;
}
.mesh-gradient-bg::before {
 content: '';
 position: absolute;
 inset: -50%;
 background:
 radial-gradient(ellipse 600px 600px at 20% 30%, rgba(139,26,26,0.12) 0%, transparent 70%),
 radial-gradient(ellipse 500px 500px at 70% 60%, rgba(201,168,76,0.10) 0%, transparent 70%),
 radial-gradient(ellipse 400px 400px at 50% 80%, rgba(139,26,26,0.08) 0%, transparent 70%);
 animation: meshMove1 20s ease-in-out infinite;
 pointer-events: none;
 z-index: 0;
}
.mesh-gradient-bg > * {
 position: relative;
 z-index: 1;
}
.wave-divider-top {
 position: relative;
}
.wave-divider-top::before {
 content: '';
 position: absolute;
 top: -1px;
 left: 0;
 right: 0;
 height: 60px;
 background: inherit;
 clip-path: polygon(
 0% 100%, 5% 85%, 10% 75%, 15% 70%, 20% 68%,
 25% 70%, 30% 75%, 35% 78%, 40% 76%, 45% 70%,
 50% 65%, 55% 62%, 60% 65%, 65% 72%, 70% 78%,
 75% 80%, 80% 76%, 85% 70%, 90% 68%, 95% 72%,
 100% 80%, 100% 0%, 0% 0%
 );
 z-index: 2;
 pointer-events: none;
}
.wave-divider-bottom {
 position: relative;
}
.wave-divider-bottom::after {
 content: '';
 position: absolute;
 bottom: -1px;
 left: 0;
 right: 0;
 height: 60px;
 background: inherit;
 clip-path: polygon(
 0% 0%, 5% 15%, 10% 25%, 15% 30%, 20% 32%,
 25% 30%, 30% 25%, 35% 22%, 40% 24%, 45% 30%,
 50% 35%, 55% 38%, 60% 35%, 65% 28%, 70% 22%,
 75% 20%, 80% 24%, 85% 30%, 90% 32%, 95% 28%,
 100% 20%, 100% 100%, 0% 100%
 );
 z-index: 2;
 pointer-events: none;
}
.glass-card {
 background: rgba(255,255,255,0.08);
 backdrop-filter: blur(16px) saturate(1.4);
 -webkit-backdrop-filter: blur(16px) saturate(1.4);
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 20px;
}
.glass-gold {
 background: rgba(201,168,76,0.06);
 backdrop-filter: blur(16px) saturate(1.3);
 -webkit-backdrop-filter: blur(16px) saturate(1.3);
 border: 1px solid rgba(201,168,76,0.15);
}
.glass-maroon {
 background: rgba(139,26,26,0.06);
 backdrop-filter: blur(16px) saturate(1.3);
 -webkit-backdrop-filter: blur(16px) saturate(1.3);
 border: 1px solid rgba(139,26,26,0.15);
}
.grain-overlay::after {
 content: '';
 position: absolute;
 inset: 0;
 opacity: 0.03;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
 background-repeat: repeat;
 background-size: 256px 256px;
 pointer-events: none;
 z-index: 0;
 mix-blend-mode: overlay;
}
.card-gradient-border {
 position: relative;
 border-radius: 20px;
 overflow: hidden;
}
.card-gradient-border::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: 20px;
 padding: 1.5px;
 background: linear-gradient(135deg, rgba(201,168,76,0.1), rgba(139,26,26,0.1), rgba(201,168,76,0.1));
 background-size: 200% 200%;
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
 transition: all 0.5s ease;
}
.card-gradient-border:hover::before {
 background: linear-gradient(135deg, rgba(201,168,76,0.5), rgba(139,26,26,0.4), rgba(201,168,76,0.5));
 background-size: 200% 200%;
 animation: gradientBorderMove 3s ease infinite;
 padding: 2px;
}
@keyframes gradientBorderMove {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}
.btn-premium, .btn-primary {
 position: relative;
 overflow: hidden;
}
.btn-premium::after, .btn-primary::after {
 content: '';
 position: absolute;
 inset: -2px;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(139,26,26,0.3));
 filter: blur(12px);
 opacity: 0;
 transition: opacity 0.4s ease;
 z-index: -1;
}
.btn-premium:hover::after, .btn-primary:hover::after {
 opacity: 1;
}
.btn-ripple {
 position: relative;
 overflow: hidden;
}
.btn-ripple .ripple-effect {
 position: absolute;
 border-radius: 50%;
 background: rgba(255,255,255,0.3);
 transform: scale(0);
 animation: rippleAnim 0.6s ease-out forwards;
 pointer-events: none;
}
@keyframes rippleAnim {
 to {
 transform: scale(4);
 opacity: 0;
 }
}
.reveal-on-scroll { opacity: 1; transform: none; }
.reveal-fade-left { opacity: 1; transform: none; }
.reveal-fade-right { opacity: 1; transform: none; }
.reveal-scale-up { opacity: 1; transform: none; }
body.js-reveal-init .reveal-on-scroll:not(.revealed) {
 opacity: 0; transform: translateY(30px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
body.js-reveal-init .reveal-fade-left:not(.revealed) {
 opacity: 0; transform: translateX(-30px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
body.js-reveal-init .reveal-fade-right:not(.revealed) {
 opacity: 0; transform: translateX(30px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
body.js-reveal-init .reveal-scale-up:not(.revealed) {
 opacity: 0; transform: scale(0.95);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
.revealed { opacity: 1 !important; transform: none !important; }
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
 .reveal-on-scroll,
 .reveal-fade-left,
 .reveal-fade-right,
 .reveal-scale-up {
 opacity: 1;
 transform: none;
 transition: none;
 }
 .mesh-gradient-bg::before {
 animation: none;
 }
}