:root{--primary-color: #ff4d6d;--secondary-color: #ff8fab;--accent-color: #ffc2d1;--dark-color: #212529;--light-color: #f8f9fa;--gray-color: #6c757d;--gray-light: #e9ecef;--gray-lighter: #f0f0f0;--gray-border: #dee2e6;--white-color: #ffffff;--success-color: #52c41a;--danger-color: #dc3545;--warning-color: #faad14;--info-color: #1677ff;--purple-color: #722ed1;--orange-color: #fd7e14;--blue-color: #0d6efd;--blue-light: #f0f7ff;--red-light: #ff4d4f;--shadow-color: rgba(0,0,0,0.1);--shadow-light: rgba(0,0,0,0.05);--body-bg: #f5f7fa}html::-webkit-scrollbar,body::-webkit-scrollbar,.nav-body::-webkit-scrollbar{display:none}body{font-family: "Microsoft YaHei", sans-serif;overflow-x: hidden;background-color: var(--body-bg)}.navbar{background-color: var(--primary-color);box-shadow: 0 2px 10px var(--shadow-color);padding: 0.45rem 1rem;height: 55px}.navbar-brand{color: var(--white-color);font-weight: bold;font-size: 1.25rem;display: flex;align-items: center;gap: 6px}.navbar-brand:hover{color: var(--white-color)}.nav-link{color: rgba(255, 255, 255, 0.95);font-weight: 500;padding: 0.3rem 0.7rem;display: flex;align-items: center;gap: 5px;font-size: 0.9rem;transition: color 0.3s ease}.nav-link:hover{color: var(--white-color)}.navbar-toggler{border: none;color: var(--white-color);font-size: 1.25rem;padding: 0}.search-wrapper{position: relative;display: flex;align-items: center;justify-content: center;margin: 0 auto}.search-circle{width: 28px;height: 28px;border-radius: 999px !important;background-color: var(--white-color);display: flex;align-items: center;justify-content: flex-start;cursor: pointer;transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);box-shadow: 0 2px 8px var(--shadow-color);position: relative;z-index: 1;overflow: hidden}.search-circle i{color: var(--primary-color);font-size: 0.8rem;transition: all 0.3s ease;position: absolute;right: 8px;top: 50%;transform: translateY(-50%);z-index: 2}.search-circle.active{width: 320px;height: 28px;border-radius: 999px !important;padding: 0 30px 0 10px}.search-input{position: absolute;width: 100%;height: 100%;border: none;outline: none;background: transparent;font-size: 0.75rem;opacity: 0;transition: opacity 0.3s ease 0.1s;pointer-events: none;left: 0;padding: 0 10px}.search-circle.active .search-input{opacity: 1;pointer-events: all}.user-dropdown{position: relative}.user-dropdown .dropdown-menu{position: absolute;top: 100%;right: 0;min-width: 160px;background: var(--white-color);border-radius: 8px;box-shadow: 0 4px 15px var(--shadow-color);border: none;margin-top: 5px;display: block;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;z-index: 1050}.user-dropdown:hover .dropdown-menu{opacity: 1;visibility: visible;transform: translateY(0)}.dropdown-item{padding: 10px 15px;color: var(--dark-color);display: flex;align-items: center;gap: 8px;transition: all 0.2s ease}.dropdown-item:hover{background-color: var(--light-color);color: var(--primary-color);padding-left: 20px}.sidebar-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);z-index: 1040;display: none;opacity: 0;transition: opacity 0.3s ease}.sidebar-overlay.active{display: block;opacity: 1}.sidebar{position: fixed;top: 0;left: -280px;width: 280px;height: 100%;background-color: var(--white-color);z-index: 1050;transition: left 0.3s ease;box-shadow: 2px 0 10px var(--shadow-color);overflow-y: auto}.sidebar.active{left: 0}.sidebar-header{padding: 1.5rem 1rem;background-color: var(--primary-color);color: var(--white-color);display: flex;justify-content: space-between;align-items: center}.sidebar-close{background: none;border: none;color: var(--white-color);font-size: 1.5rem;cursor: pointer;transition: transform 0.3s ease}.sidebar-close:hover{transform: rotate(90deg)}.sidebar-menu{padding: 1rem 0}.sidebar-menu-item{padding: 0.9rem 1.5rem;display: flex;align-items: center;gap: 10px;color: var(--dark-color);text-decoration: none;transition: all 0.2s ease}.sidebar-menu-item:hover{background-color: var(--light-color);color: var(--primary-color);padding-left: 25px}.sidebar-menu-item i{width: 20px;text-align: center}.hero-section{position: relative;padding: .5rem 0}.hero-info-card{background: var(--white-color);border-radius: 16px;height: 100%;min-height: 400px;padding: 2rem;display: flex;flex-direction: column;justify-content: center;box-shadow: 0 4px 15px var(--shadow-light)}.hero-info-title{color: var(--primary-color);font-weight: bold;margin-bottom: 1rem;font-size: 1.2rem}.hero-info-item{display: flex;align-items: center;gap: 10px;padding: 0.9rem 0;border-bottom: 1px dashed var(--gray-border)}.hero-info-item:last-child{border-bottom: none}.hero-info-icon{width: 36px;height: 36px;border-radius: 50%;background: var(--accent-color);display: flex;align-items: center;justify-content: center;color: var(--primary-color)}#heroCarousel{border-radius: 16px;overflow: hidden}.carousel-item{height: 400px;background-color: var(--gray-border)}.carousel-item img{height: 100%;object-fit: cover}.carousel-indicators button{width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255,255,255,0.5);margin: 0 5px}.carousel-indicators button.active{background-color: var(--white-color)}.carousel-control-prev,.carousel-control-next{width: 45px;height: 45px;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0.3);border-radius: 50%;margin: 0 15px}@media (max-width: 768px){.carousel-item{height: 200px}.hero-info-card{min-height: auto;margin-top: 1rem;padding: 1.5rem}.search-circle.active{width: 240px}.category-name{font-size: 0.8rem}}section{border-radius: 0;margin-bottom: 0rem;overflow: hidden}.container{max-width: 1200px !important}.coupon-card{background: linear-gradient(135deg, var(--white-color), var(--light-color));border-radius: 16px;overflow: hidden;box-shadow: 0 4px 15px var(--shadow-light);transition: transform 0.3s ease, box-shadow 0.3s ease;border: 1px dashed var(--gray-border);position: relative;height: 100%}.coupon-card:hover{transform: translateY(-5px);box-shadow: 0 8px 25px var(--shadow-color)}.coupon-header{background-color: var(--primary-color);color: var(--white-color);padding: 14px 18px}.coupon-price{font-size: 2rem;font-weight: bold}.coupon-condition{font-size: 0.9rem;opacity: 0.9}.coupon-body{padding: 18px}.coupon-desc{color: var(--gray);font-size: 0.9rem;margin-bottom: 10px}.coupon-time{color: var(--gray);font-size: 0.8rem}.coupon-btn{background-color: var(--secondary-color);color: var(--white-color);border: none;border-radius: 20px;padding: 7px 16px;font-size: 0.9rem;transition: background-color 0.3s ease}.coupon-btn:hover{background-color: var(--primary-color);color: var(--white-color)}.red-envelope{background: linear-gradient(135deg, #ff3838, #ff4d4d);border-radius: 16px;padding: 25px;color: var(--white-color);text-align: center;box-shadow: 0 4px 15px rgba(255, 61, 61, 0.2);position: relative;overflow: hidden;transition: transform 0.3s ease;height: 100%}.red-envelope:hover{transform: translateY(-3px)}.envelope-amount{font-size: 2.5rem;font-weight: bold;margin: 12px 0}.envelope-desc{font-size: 0.95rem;opacity: 0.95}.envelope-btn{background-color: var(--white-color);color: var(--primary-color);border: none;border-radius: 25px;padding: 9px 28px;font-weight: bold;margin-top: 18px;transition: transform 0.3s ease}.envelope-btn:hover{transform: scale(1.05)}.product-card{border-radius: 16px;overflow: hidden;box-shadow: 0 4px 15px var(--shadow-light);transition: transform 0.3s ease, box-shadow 0.3s ease;background-color: var(--white-color);height: 100%}.product-card:hover{transform: translateY(-5px);box-shadow: 0 8px 25px var(--shadow-color)}.product-img{height: 200px;object-fit: cover;width: 100%}.product-body{padding: 18px}.product-title{font-size: 1rem;font-weight: 600;margin-bottom: 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 42px}.product-price{color: var(--primary-color);font-weight: bold;font-size: 1.25rem;margin-bottom: 6px}.product-original{text-decoration: line-through;color: var(--gray);font-size: 0.9rem;margin-left: 8px}.product-tag{background-color: var(--accent-color);color: var(--primary-color);padding: 3px 8px;border-radius: 4px;font-size: 0.75rem;margin-right: 5px}.product-sales{color: var(--gray);font-size: 0.8rem}.category-item{text-align: center;padding: 15px 8px;transition: transform 0.3s ease}.category-item:hover{transform: translateY(-3px)}.category-icon{width: 52px;height: 52px;border-radius: 50%;background-color: var(--accent-color);display: flex;align-items: center;justify-content: center;margin: 0 auto 10px;color: var(--primary-color);font-size: 1.5rem;transition: transform 0.3s ease}.category-item:hover .category-icon{transform: scale(1.1)}.category-name{font-size: 0.9rem;color: var(--dark-color)}.article-card{background-color: var(--white-color);border-radius: 16px;overflow: hidden;box-shadow: 0 4px 15px var(--shadow-light);height: 100%;transition: transform 0.3s ease}.article-card:hover{transform: translateY(-5px)}.article-img{height: 180px;object-fit: cover;width: 100%}.article-body{padding: 18px}.article-title{font-size: 1.1rem;font-weight: 600;margin-bottom: 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}.article-desc{color: var(--gray);font-size: 0.9rem;margin-bottom: 12px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden}.article-meta{display: flex;justify-content: space-between;color: var(--gray);font-size: 0.8rem}.section-title{font-size: 1.5rem;font-weight: bold;margin-bottom: 24px;display: flex;align-items: center;gap: 10px;color: var(--dark-color)}.section-title i{color: var(--primary-color)}.footer{background-color: var(--dark-color);color: var(--white-color);padding: 45px 0 20px;border-radius: 16px 16px 0 0}.footer-title{font-size: 1.2rem;font-weight: bold;margin-bottom: 20px;color: var(--accent-color)}.footer-link{color: rgba(255, 255, 255, 0.8);text-decoration: none;display: block;margin-bottom: 10px;transition: color 0.3s ease, padding-left 0.3s ease}.footer-link:hover{color: var(--secondary-color);padding-left: 5px}.sidebar-menu-item[aria-expanded="true"] .bi-chevron-right{transform: rotate(90deg);transition: transform 0.3s}.navbar-nav .nav-item{position: relative}.navbar-nav .nav-item .index{display: none}.navbar-nav .nav-item:hover .index{position: absolute;left: 0;top: -12px;z-index: -1;display: block;width: 100%;height: 53px;background: rgba(100, 77, 109, 0.3)} .copyright{text-align: center;padding-top: 22px;border-top: 1px solid rgba(255, 255, 255, 0.1);color: rgba(255, 255, 255, 0.6);font-size: 0.9rem}.copyright a{color: inherit;text-decoration: none}.right-menu{position: fixed;bottom: 30px;right: 10px;width: 40px;height:auto;z-index: 9999}.right-menu > div{width: 40px;height: 40px;border-radius: 50%;background-color: var(--primary-color);color: var(--white-color);display: flex;align-items: center;justify-content: center;font-size: 1.2rem;box-shadow: 0 4px 10px var(--shadow-color);cursor: pointer;transition: all 0.3s ease;margin-bottom: 5px}.right-menu > .scroll-top{display: none}.scroll-top.show{display: flex}.scroll-top:hover{transform: scale(1.1)}a{text-decoration: none}@media (min-width: 768px){.rounded-md-2{border-radius: 0.375rem !important;}.rounded-md-3{border-radius: 0.5rem !important;}.rounded-md-4{border-radius: 1rem !important;}}@media (min-width: 992px){.rounded-lg-2{border-radius: 0.375rem !important;}.rounded-lg-3{border-radius: 0.5rem !important;}.rounded-lg-4{border-radius: 1rem !important;}.rounded-lg-5{border-radius: 1.5rem !important;}}@media (min-width: 1200px){.rounded-xl-3{border-radius: 0.5rem !important;}.rounded-xl-4{border-radius: 1rem !important;}.rounded-xl-5{border-radius: 1.5rem !important;}}.post-image-slider{background: var(--gray-light);border-radius: 12px;overflow: hidden;position: relative}.carousel-inner{border-radius: 12px}.carousel-item{text-align: center;background: var(--gray-light);min-height: 350px;align-items: center;justify-content: center}.carousel-item.active{display: flex}.carousel-item img{max-width: 100%;max-height: 400px;object-fit: contain}.carousel-control-prev,.carousel-control-next{width: 8%;opacity: 0.8}.carousel-control-prev-icon,.carousel-control-next-icon{background-color: rgba(0,0,0,0.5);border-radius: 50%;padding: 20px;background-size: 50%}.carousel-indicators button{width: 10px!important;height: 10px!important;border-radius: 50%;margin: 0 4px;background-color: var(--gray-border)}.carousel-indicators button.active{background-color: var(--blue-color)}.image-counter{position: absolute;bottom: 15px;right: 20px;background: rgba(0,0,0,0.6);color: var(--white-color);padding: 4px 12px;border-radius: 20px;font-size: 12px;z-index: 10;pointer-events: none}.sr-only{display: none}