@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap";:root{--color-primary: #8B1A1A;--color-primary-hover: #6B1414;--color-secondary: #C5963A;--color-secondary-hover: #A87D2F;--color-bg: #FFFDF7;--color-bg-alt: #F8F9FA;--color-surface: #FFFFFF;--color-text: #1A1A2E;--color-text-secondary: #5A5A6E;--color-text-light: #8A8A9E;--color-border: #E5E7EB;--color-border-gold: rgba(197, 150, 58, .3);--color-success: #22C55E;--color-warning: #F59E0B;--color-error: #EF4444;--color-muted: #94A3B8;--color-zalo: #0068FF;--color-messenger: #006AFF;--color-phone: #22C55E;--font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--space-1: .25rem;--space-2: .5rem;--space-3: .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;--space-20: 5rem;--radius-sm: 4px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);--shadow-warm: 0 2px 12px rgba(139, 26, 26, .08);--transition-fast: .15s ease;--transition: .2s ease;--transition-slow: .3s ease;--max-width: 1200px;--navbar-height: 64px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;display:block}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{cursor:pointer;font-family:var(--font-family);border:none;outline:none}input,textarea,select{font-family:var(--font-family);font-size:var(--font-size-base)}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-4)}.section{padding:var(--space-16) 0}.section-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text);text-align:center;margin-bottom:var(--space-8)}@media(min-width:768px){.section-title{font-size:var(--font-size-3xl)}}.nav-link{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500;text-decoration:none;position:relative;padding:4px 0;transition:color var(--transition)}.nav-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--color-secondary);border-radius:1px;transition:width var(--transition-slow)}.nav-link:hover{color:var(--color-primary)}.nav-link:hover:after{width:100%}.nav-link-active{color:var(--color-primary);font-weight:600}.nav-link-active:after{width:100%}.icon-btn{width:40px;height:40px;border-radius:var(--radius);background:transparent;color:var(--color-text);display:flex;align-items:center;justify-content:center;transition:all var(--transition);border:none;cursor:pointer}.icon-btn:hover{background-color:var(--color-bg-alt);color:var(--color-primary);transform:translateY(-1px)}.icon-btn:active{transform:translateY(0);background-color:#8b1a1a14}.icon-btn:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}.mobile-menu-btn{display:none}.mobile-menu-overlay{position:fixed;inset:0;top:var(--navbar-height);background:#0006;z-index:99;animation:fadeIn .2s ease}.mobile-menu{background:var(--color-surface);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);box-shadow:var(--shadow-lg);animation:slideDown .25s ease}.mobile-nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius);color:var(--color-text);font-weight:500;font-size:var(--font-size-base);text-decoration:none;transition:all var(--transition)}.mobile-nav-link:hover{background-color:var(--color-bg-alt);color:var(--color-primary)}.mobile-nav-link.nav-link-active{background-color:#8b1a1a0f;color:var(--color-primary);font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius);transition:all var(--transition);min-height:48px;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:#fff0;transition:background var(--transition)}.btn:active:after{background:#00000014}.btn:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 4px 16px #8b1a1a40;color:#fff}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-secondary{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-secondary:hover{background-color:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 16px #8b1a1a33}.btn-secondary:active{transform:translateY(0)}.btn-gold{background-color:var(--color-secondary);color:#fff}.btn-gold:hover{background-color:var(--color-secondary-hover);transform:translateY(-2px);box-shadow:0 4px 16px #c5963a4d;color:#fff}.btn-gold:active{transform:translateY(0)}.btn-full{width:100%}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-cta-contact:hover{transform:translateY(-2px);box-shadow:0 6px 28px #c5963a80!important;color:#fff}.btn-cta-contact:active{transform:translateY(0)}.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform var(--transition-slow),box-shadow var(--transition-slow)}.card:hover{box-shadow:0 8px 32px #0000001f}.admin-panel .card{transition:none}.admin-panel .card:hover{box-shadow:var(--shadow);transform:none}.feature-card:hover{border-color:var(--color-border-gold)!important;box-shadow:0 4px 20px #c5963a1f!important}.feature-card:hover div:first-child{background-color:#c5963a2e!important;transform:scale(1.08)}.view-all-link,.view-detail-link{transition:all var(--transition)}.view-all-link:hover,.view-detail-link:hover{color:var(--color-secondary-hover)!important;gap:8px!important}.process-step:hover div:first-child{transform:scale(1.1)}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);margin-bottom:var(--space-1)}.form-label .required{color:var(--color-error)}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-surface);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);min-height:48px}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #8b1a1a1a}.form-input::placeholder{color:var(--color-text-light)}.form-hint{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--space-1)}.form-error{font-size:var(--font-size-xs);color:var(--color-error);margin-top:var(--space-1)}textarea.form-input{min-height:100px;resize:vertical}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.badge-gold{background:#c5963a26;color:var(--color-secondary);border:1px solid var(--color-border-gold)}.badge-new{background:#ef44441a;color:var(--color-error)}.badge-confirmed{background:#f59e0b1a;color:var(--color-warning)}.badge-completed{background:#22c55e1a;color:var(--color-success)}.badge-cancelled{background:#94a3b81a;color:var(--color-muted)}.price{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary)}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:var(--color-error);padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.success-banner{background:#22c55e1a;border:1px solid rgba(34,197,94,.2);color:var(--color-success);padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--font-size-sm);margin-bottom:var(--space-4)}.grid{display:grid;gap:var(--space-4)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media(min-width:1024px){.product-detail-grid{grid-template-columns:7fr 5fr!important}.order-page-grid{flex-direction:row!important}.order-page-grid>div:first-child{width:55%}.order-page-grid>div:last-child{width:45%}.dashboard-split{flex-direction:row!important}.dashboard-split>div:first-child{width:65%}.dashboard-split>div:last-child{width:35%}}@media(max-width:1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.section{padding:var(--space-12) 0}.process-steps{flex-wrap:wrap!important;gap:32px!important}.process-step{flex:0 0 calc(50% - 16px)!important}.process-line{display:none!important}}@media(max-width:768px){.brand-text{display:none!important}.mobile-menu-btn{display:flex!important}.desktop-menu{display:none!important}.hero-grid{grid-template-columns:1fr!important;gap:var(--space-8)!important;text-align:center}.hero-grid h1{font-size:2rem!important}.contact-grid{grid-template-columns:1fr!important}.section{padding:var(--space-10) 0}:root{--navbar-height: 56px}}@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.container{padding:0 var(--space-4)}.process-steps{flex-direction:column!important;align-items:center!important}.process-step{flex:none!important;width:100%!important;max-width:280px}.section-title{font-size:var(--font-size-xl)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animate-fade-in-up{animation:fadeInUp .5s ease forwards}.bg-surface{background-color:var(--color-bg-alt)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.dropdown{position:relative;display:flex;align-items:center;height:100%}.dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;background-color:var(--color-surface);box-shadow:var(--shadow-lg);border-radius:var(--radius-md);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition-fast) ease;z-index:1000;border:1px solid var(--color-border)}.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown:hover .dropdown-toggle>span.material-symbols-outlined:last-child{transform:rotate(180deg)}.dropdown-item{display:block;padding:10px 20px;color:var(--color-text);text-decoration:none;font-size:14px;font-weight:500;transition:background-color var(--transition-fast),color var(--transition-fast)}.dropdown-item:hover{background-color:var(--color-bg-alt);color:var(--color-primary)}.dropdown-divider{height:1px;background-color:var(--color-border);margin:8px 0}.btn-login:hover{background-color:var(--color-primary-hover)!important;box-shadow:0 4px 12px #8b1a1a33!important;transform:translateY(-1px)}.desktop-only{display:flex!important}@media(max-width:768px){.desktop-only{display:none!important}.contact-page-grid{grid-template-columns:1fr!important}}@keyframes pulse-animation{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}to{transform:scale(1.5);opacity:0}}.pulse-ring{pointer-events:none}.fab-btn:hover{transform:scale(1.1)!important}.grid-responsive-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-responsive-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.admin-layout-grid{display:grid;grid-template-columns:1fr 340px;gap:24px}.order-tracking-grid{display:grid;grid-template-columns:minmax(120px,3fr) 7fr;gap:8px}@media(max-width:992px){.admin-layout-grid{grid-template-columns:1fr}}@media(max-width:768px){.grid-responsive-2,.grid-responsive-3,.order-tracking-grid{grid-template-columns:1fr}}
