/* ===== CSS Reset & Variables ===== */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   :root {
     --primary: #c9a96e;
     --primary-dark: #a8894f;
     --secondary: #2c2c2c;
     --text: #333;
     --text-light: #666;
     --bg: #faf8f5;
     --white: #fff;
     --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   body {
     font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
     color: var(--text);
     background: var(--bg);
     overflow-x: hidden;
   }

   /* ===== Navigation ===== */
   .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
     transition: var(--transition);
   }

   .navbar.scrolled {
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
   }

   .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 70px;
   }

   .logo {
     font-size: 28px;
     font-weight: 700;
     color: var(--primary);
     text-decoration: none;
     letter-spacing: 2px;
   }

   .logo img{
    height:48px
   }

   .logo span {
     color: var(--secondary);
   }

   .nav-menu {
     display: flex;
     list-style: none;
     gap: 0;
   }

   .nav-item {
     position: relative;
   }

   .nav-link {
     display: block;
     padding: 25px 20px;
     color: var(--text);
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: var(--transition);
   }

   .nav-link:hover {
     color: var(--primary);
   }

   /* Dropdown */
   .dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     background: var(--white);
     min-width: 220px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: var(--transition);
     border-radius: 0 0 8px 8px;
     overflow: hidden;
   }

   .nav-item:hover .dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
   }

   .dropdown a {
     display: block;
     padding: 14px 24px;
     color: var(--text);
     text-decoration: none;
     font-size: 13px;
     border-bottom: 1px solid #f0f0f0;
     transition: var(--transition);
   }

   .dropdown a:hover {
     background: var(--bg);
     color: var(--primary);
     padding-left: 30px;
   }

   .mobile-toggle {
     display: none;
     font-size: 24px;
     cursor: pointer;
     color: var(--secondary);
   }

   /* ===== Banner Slider ===== */
   .banner {
     position: relative;
     height: 100vh;
     min-height: 600px;
     overflow: hidden;
     margin-top: 0;
   }

   .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .slide.active {
     opacity: 1;
   }

   .slide::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
   }

   .slide-content {
     position: relative;
     z-index: 2;
     text-align: center;
     color: var(--white);
     padding: 0 20px;
     max-width: 800px;
   }

   .slide-content h2 {
     font-size: 56px;
     font-weight: 300;
     margin-bottom: 20px;
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.8s ease 0.3s;
     letter-spacing: 3px;
   }

   .slide.active .slide-content h2 {
     opacity: 1;
     transform: translateY(0);
   }

   .slide-content p {
     font-size: 18px;
     margin-bottom: 35px;
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s ease 0.5s;
     line-height: 1.8;
   }

   .slide.active .slide-content p {
     opacity: 1;
     transform: translateY(0);
   }

   .btn-primary {
     display: inline-block;
     padding: 16px 45px;
     background: var(--primary);
     color: var(--white);
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     border-radius: 50px;
     transition: var(--transition);
     opacity: 0;
     transform: translateY(20px);
   }

   .slide.active .btn-primary {
     opacity: 1;
     transform: translateY(0);
     transition: all 0.8s ease 0.7s, background 0.3s ease;
   }

   .btn-primary:hover {
     background: var(--primary-dark);
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(201, 169, 110, 0.4);
   }

   .slider-dots {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 12px;
     z-index: 10;
   }

   .dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.4);
     cursor: pointer;
     transition: var(--transition);
     border: 2px solid transparent;
   }

   .dot.active {
     background: var(--primary);
     border-color: var(--white);
     transform: scale(1.2);
   }

   .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     font-size: 18px;
     cursor: pointer;
     z-index: 10;
     transition: var(--transition);
   }

   .slider-arrow:hover {
     background: var(--primary);
     border-color: var(--primary);
   }

   .slider-arrow.prev {
     left: 30px;
   }

   .slider-arrow.next {
     right: 30px;
   }

   /* ===== Section Common ===== */
   .section {
     padding: 100px 0;
   }

   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
   }

   .section-header {
     text-align: center;
     margin-bottom: 60px;
   }

   .section-header h3 {
     font-size: 14px;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 4px;
     margin-bottom: 15px;
   }

   .section-header h2 {
     font-size: 36px;
     color: var(--secondary);
     font-weight: 600;
     position: relative;
     display: inline-block;
   }

   .section-header h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: var(--primary);
   }

   
   /* ===== Hot Products ===== */
   .products-section {
     background: var(--white);
   }

   .product-tabs {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 50px;
     flex-wrap: wrap;
   }

   .tab-btn {
     padding: 12px 30px;
     background: transparent;
     border: 2px solid #e0e0e0;
     color: var(--text);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
     border-radius: 50px;
     text-transform: uppercase;
     letter-spacing: 1px;
   }

   .tab-btn:hover,
   .tab-btn.active {
     background: var(--primary);
     border-color: var(--primary);
     color: var(--white);
   }

   .product-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
   }

   .product-item {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     background: var(--bg);
     transition: var(--transition);
     opacity: 0;
     transform: translateY(40px);
   }

   .product-item.visible {
     opacity: 1;
     transform: translateY(0);
   }

   .product-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
   }

   .product-img {
     width: 100%;
     height: 280px;
     object-fit: cover;
     transition: var(--transition);
   }

   .product-item:hover .product-img {
     transform: scale(1.08);
   }

   .product-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(201, 169, 110, 0.85);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: var(--transition);
   }

   .product-item:hover .product-overlay {
     opacity: 1;
   }

   .product-overlay a {
     width: 50px;
     height: 50px;
     background: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 18px;
     margin: 0 8px;
     transform: translateY(20px);
     transition: all 0.4s ease;
   }

   .product-item:hover .product-overlay a {
     transform: translateY(0);
   }

   .product-overlay a:hover {
     background: var(--secondary);
     color: var(--white);
   }

   .product-info {
     padding: 20px;
     text-align: center;
   }

   .product-info h4 {
     font-size: 16px;
     color: var(--secondary);
     margin-bottom: 8px;
     font-weight: 600;
   }

   .product-info .price {
     color: var(--primary);
     font-size: 18px;
     font-weight: 700;
   }

   .product-info .price del {
     color: #aaa;
     font-size: 14px;
     margin-right: 8px;
     font-weight: 400;
   }

   /* ===== About Us ===== */
   .about-section {
     background: var(--bg);
   }

   .about-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
   }

   .about-img {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
   }

   .about-img img {
     width: 100%;
     border-radius: 12px;
     transition: var(--transition);
   }

   .about-img:hover img {
     transform: scale(1.03);
   }

   .about-img::before {
     content: '';
     position: absolute;
     top: -20px;
     left: -20px;
     width: 100%;
     height: 100%;
     border: 3px solid var(--primary);
     border-radius: 12px;
     z-index: -1;
   }

   .about-text h3 {
     font-size: 32px;
     color: var(--secondary);
     margin-bottom: 25px;
     font-weight: 600;
   }

   .about-text p {
     color: var(--text-light);
     line-height: 1.9;
     margin-bottom: 20px;
     font-size: 15px;
   }

   .about-text .btn-primary {
     opacity: 1;
     transform: none;
     margin-top: 10px;
   }

   /* Stats */
   .stats-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     margin-top: 60px;
   }

   .stat-item {
     text-align: center;
     padding: 35px 20px;
     background: var(--white);
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: var(--transition);
   }

   .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
   }

   .stat-icon {
     font-size: 36px;
     color: var(--primary);
     margin-bottom: 15px;
   }

   .stat-number {
     font-size: 42px;
     font-weight: 700;
     color: var(--secondary);
     margin-bottom: 8px;
   }

   .stat-label {
     font-size: 14px;
     color: var(--text-light);
     text-transform: uppercase;
     letter-spacing: 1px;
   }

   /* ===== News ===== */
   .news-section {
     background: var(--white);
   }

   .news-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
   }

   .news-item {
     background: var(--bg);
     border-radius: 12px;
     overflow: hidden;
     transition: var(--transition);
     opacity: 0;
     transform: translateY(40px);
   }

   .news-item.visible {
     opacity: 1;
     transform: translateY(0);
   }

   .news-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
   }

   .news-img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     transition: var(--transition);
   }

   .news-item:hover .news-img {
     transform: scale(1.05);
   }

   .news-content {
     padding: 25px;
   }

   .news-date {
     font-size: 13px;
     color: var(--primary);
     font-weight: 600;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 6px;
   }

   .news-content h4 {
     font-size: 18px;
     color: var(--secondary);
     margin-bottom: 12px;
     line-height: 1.4;
     transition: var(--transition);
   }

   .news-item:hover .news-content h4 {
     color: var(--primary);
   }

   .news-content p {
     font-size: 14px;
     color: var(--text-light);
     line-height: 1.7;
   }

   .read-more {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--primary);
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     margin-top: 15px;
     transition: var(--transition);
   }

   .read-more:hover {
     gap: 12px;
   }

   /* ===== Footer ===== */
   .footer {
     background: var(--secondary);
     color: #aaa;
     padding: 70px 0 0;
   }

   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 50px;
     margin-bottom: 50px;
   }

   .footer-brand h3 {
     font-size: 24px;
     color: var(--white);
     margin-bottom: 20px;
   }
.footer-brand h3 img{height:48px}

   .footer-brand h3 span {
     color: var(--primary);
   }

   .footer-brand p {
     line-height: 1.8;
     margin-bottom: 20px;
     font-size: 14px;
   }

   .social-links {
     display: flex;
     gap: 12px;
   }

   .social-links a {
     width: 40px;
     height: 40px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #aaa;
     text-decoration: none;
     transition: var(--transition);
   }

   .social-links a:hover {
     background: var(--primary);
     border-color: var(--primary);
     color: var(--white);
     transform: translateY(-3px);
   }

   .footer-links h4 {
     font-size: 16px;
     color: var(--white);
     margin-bottom: 25px;
     text-transform: uppercase;
     letter-spacing: 1px;
   }

   .footer-links ul {
     list-style: none;
   }

   .footer-links li {
     margin-bottom: 12px;
   }

   .footer-links a {
     color: #aaa;
     text-decoration: none;
     font-size: 14px;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .footer-links a:hover {
     color: var(--primary);
     padding-left: 5px;
   }

   .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 25px 0;
     text-align: center;
     font-size: 13px;
   }

   /* ===== Scroll Top ===== */
   .scroll-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 45px;
     height: 45px;
     background: var(--primary);
     color: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
     z-index: 999;
     box-shadow: 0 5px 20px rgba(201, 169, 110, 0.4);
   }

   .scroll-top.visible {
     opacity: 1;
     visibility: visible;
   }

   .scroll-top:hover {
     background: var(--primary-dark);
     transform: translateY(-3px);
   }

   /* ===== Animations ===== */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(40px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   @keyframes float {

     0%,
     100% {
       transform: translateY(0);
     }

     50% {
       transform: translateY(-10px);
     }
   }

   /* ===== Responsive ===== */
   @media (max-width: 1024px) {
     .product-grid {
       grid-template-columns: repeat(3, 1fr);
     }

     .footer-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }

   @media (max-width: 768px) {
     .mobile-toggle {
       display: block;
     }
    .logo img{height:38px;}
    .nav-container{height:55px;}
     .nav-menu {
       position: fixed;
       top: 55px;
       left: -100%;
       width: 100%;
       height: calc(100vh - 70px);
       background: var(--white);
       flex-direction: column;
       padding: 30px 20px;
       transition: var(--transition);
       overflow-y: auto;
     }

     .nav-menu.active {
       left: 0;
     }

     .nav-link {
       padding: 15px 0;
       font-size: 16px;
       border-bottom: 1px solid #f0f0f0;
     }

     .dropdown {
       position: static;
       opacity: 1;
       visibility: visible;
       transform: none;
       box-shadow: none;
       display: none;
       padding-left: 20px;
     }

     .nav-item.open .dropdown {
       display: block;
     }

     .slide-content h2 {
       font-size: 32px;
     }

     .slide-content p {
       font-size: 15px;
     }

     .product-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
     }

     .about-content {
       grid-template-columns: 1fr;
     }

     .about-img::before {
       display: none;
     }

     .stats-row {
       grid-template-columns: repeat(2, 1fr);
     }

     .news-grid {
       grid-template-columns: 1fr;
     }

     .footer-grid {
       grid-template-columns: 1fr;
       gap: 40px;
     }

     .section {
       padding: 60px 0;
     }

     .slider-arrow {
       width: 40px;
       height: 40px;
       font-size: 14px;
     }

     .slider-arrow.prev {
       left: 15px;
     }

     .slider-arrow.next {
       right: 15px;
     }
   }

   @media (max-width: 480px) {
     .product-grid {
       grid-template-columns: 1fr;
     }

     .stats-row {
       grid-template-columns: 1fr;
     }

     .tab-btn {
       padding: 10px 20px;
       font-size: 12px;
     }

     .slide-content h2 {
       font-size: 26px;
     }
   }

   /* Loading animation */
   .loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--white);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.5s ease;
   }

   .loader.hidden {
     opacity: 0;
     pointer-events: none;
   }

   .loader-spinner {
     width: 50px;
     height: 50px;
     border: 3px solid #f0f0f0;
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }

   @keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }