:root{--primary-light:#08c;--primary-dark:#0062cc;--success-light:#28a745;--success-dark:#20c997;--danger-light:#ff6b6b;--danger-dark:#ff5252;--background-color:#f8f9fa;--text-primary:#333;--text-secondary:#666;--text-muted:#777;--white:#fff;--shadow-sm:0 2px 10px rgba(0,0,0,.05);--shadow-md:0 5px 15px rgba(0,0,0,.08);--shadow-lg:0 8px 25px rgba(0,0,0,.1);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:50px;--radius-circle:50%;--transition-standard:all .3s ease;--space-xs:5px;--space-sm:10px;--space-md:15px;--space-lg:20px;--space-xl:30px}body{background-color:var(--background-color);font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color:var(--text-primary);line-height:1.6}a{color:var(--primary-light);transition:var(--transition-standard)}a:hover,a:focus{color:var(--primary-dark);text-decoration:none}.navbar-modern{background-color:var(--white);border:none;box-shadow:var(--shadow-sm)}.navbar-modern .navbar-brand{font-weight:700;color:var(--primary-light);font-size:22px}.navbar-modern .nav>li>a{color:#505050;font-weight:500;padding:20px;transition:var(--transition-standard)}.navbar-modern .nav>li>a:hover,.navbar-modern .nav>li.active>a{color:var(--primary-light);background-color:transparent}.hero-section{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white);padding:var(--space-xl) 0;margin-bottom:var(--space-xl);border-radius:var(--radius-lg);box-shadow:0 5px 20px rgba(0,136,204,.3)}.hero-title{font-size:24px;font-weight:700;margin-bottom:var(--space-sm)}.hero-subtitle{font-size:16px;font-weight:300;margin-bottom:0;opacity:.9}.search-container{margin-bottom:var(--space-xl);position:relative}.search-box{display:flex;background:var(--white);border-radius:var(--radius-full);box-shadow:var(--shadow-md);overflow:hidden;position:relative}.search-input{flex-grow:1;border:none;padding:var(--space-md) var(--space-lg);font-size:16px;border-radius:var(--radius-full) 0 0 var(--radius-full);outline:none}.search-input:focus{box-shadow:none}.search-button{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));border:none;color:var(--white);padding:0 25px;border-radius:0 var(--radius-full) var(--radius-full) 0;cursor:pointer;transition:var(--transition-standard)}.search-button:hover{background:linear-gradient(135deg,#005ab8,#0074ad)}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-top:var(--space-sm);z-index:10;max-height:400px;overflow-y:auto;display:none}.search-results-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(0,0,0,.05);font-weight:600;color:var(--text-primary)}.search-result-item{padding:var(--space-sm) var(--space-lg);border-bottom:1px solid rgba(0,0,0,.05);display:flex;align-items:center;justify-content:space-between;transition:var(--transition-standard)}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:rgba(0,136,204,.05)}.search-result-name{font-weight:500;color:var(--text-primary)}.search-result-price{color:var(--danger-light);font-weight:600}.search-result-action{margin-left:var(--space-md)}.announcement-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-xl);padding:var(--space-lg);transition:var(--transition-standard);position:relative;overflow:hidden}.announcement-card:hover{box-shadow:var(--shadow-lg)}.announcement-card::before{content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(to bottom,var(--primary-dark),var(--primary-light))}.announcement-header{display:flex;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid rgba(0,0,0,.05)}.announcement-icon{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white);width:36px;height:36px;border-radius:var(--radius-circle);display:flex;align-items:center;justify-content:center;margin-right:var(--space-sm);font-size:16px;box-shadow:0 3px 10px rgba(0,136,204,.3)}.announcement-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.announcement-content{color:#505050;line-height:1.7}.category-tabs{margin-bottom:var(--space-lg);position:relative}.nav-tabs-wrapper{margin-bottom:var(--space-lg);border-bottom:1px solid #eee;position:relative}.nav-tabs-wrapper::after{content:'';position:absolute;right:0;top:0;height:100%;width:40px;background:linear-gradient(to right,rgba(248,249,250,0),rgba(248,249,250,1));pointer-events:none}.nav-tabs{border-bottom:none;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.nav-tabs::-webkit-scrollbar{display:none}.nav-tabs>li{float:none;margin-bottom:0;margin-right:5px;white-space:nowrap}.nav-tabs>li:last-child{margin-right:0}.nav-tabs>li>a{background-color:var(--background-color);color:var(--text-secondary);border:none;border-radius:20px;padding:8px 15px;font-weight:500;transition:var(--transition-standard);margin-right:0;font-size:14px}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white);border:none;box-shadow:0 3px 10px rgba(0,136,204,.3)}.nav-tabs>li>a:hover{border-color:transparent;background-color:#edf5fa}.tab-content{margin-top:var(--space-md)}.category-title-header{position:relative;text-align:center;margin-bottom:var(--space-xl)}.category-title-header:before{content:"";display:block;width:100%;height:1px;background:#eee;position:absolute;top:50%;z-index:1}.category-title-text{position:relative;z-index:2;background:var(--background-color);display:inline-block;padding:0 var(--space-lg);font-size:18px;font-weight:600;color:var(--text-primary)}.category-title-text i{color:var(--primary-light);margin-right:8px}.product-grid{display:flex;flex-wrap:wrap;margin:-10px}.product-grid-item{width:100%;padding:10px;transition:var(--transition-standard)}.product-grid-item:hover{transform:translateY(-3px)}.product-card{height:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background-color:var(--white);display:flex;transition:var(--transition-standard);overflow:hidden;min-height:100px}.product-card:hover{box-shadow:var(--shadow-lg)}.product-card-image{width:100px;min-width:100px;display:flex;align-items:center;justify-content:center;padding:8px;background-color:rgba(0,136,204,.03);border-right:1px solid rgba(0,0,0,.03)}.product-image{width:84px;height:84px;border-radius:var(--radius-circle);object-fit:cover;box-shadow:0 3px 8px rgba(0,0,0,.1);border:1px solid var(--primary-light)}.product-card-content{flex:1;padding:12px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.product-card-name{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-right:10px}.product-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.product-card-price{color:var(--danger-light);font-weight:600;font-size:16px;white-space:nowrap;margin-right:10px}.product-card-unit{font-size:12px;color:var(--text-secondary);font-weight:normal}.product-card-action{white-space:nowrap;margin-left:auto}.btn-modern{border-radius:20px;border:none;padding:6px 12px;font-weight:500;font-size:13px;transition:var(--transition-standard);position:relative;white-space:nowrap}.btn-modern:before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background-color:rgba(255,255,255,.1);transition:var(--transition-standard);border-radius:inherit}.btn-modern:hover:before{width:100%}.btn-modern-primary{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white)}.btn-modern-primary:hover,.btn-modern-primary:focus{background:linear-gradient(135deg,#005cb8,#0074ad);color:var(--white);transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,136,204,.4)}.btn-modern-success{background:linear-gradient(135deg,var(--success-light),var(--success-dark));color:var(--white)}.btn-modern-success:hover,.btn-modern-success:focus{background:linear-gradient(135deg,#22933c,#1cb386);color:var(--white);transform:translateY(-2px);box-shadow:0 3px 8px rgba(40,167,69,.4)}.btn-modern-danger{background:linear-gradient(135deg,var(--danger-light),var(--danger-dark));color:var(--white)}.btn-modern-danger:hover,.btn-modern-danger:focus{background:linear-gradient(135deg,#ff5252,#ff3838);color:var(--white);transform:translateY(-2px);box-shadow:0 3px 8px rgba(255,107,107,.4)}.btn-sm{padding:5px 10px;font-size:12px}.cart-fixed-btn{position:fixed;right:25px;bottom:25px;width:60px;height:60px;line-height:60px;text-align:center;border-radius:var(--radius-circle);background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white);box-shadow:0 5px 20px rgba(0,0,0,.2);z-index:999;transition:var(--transition-standard);font-size:24px}.cart-fixed-btn:hover{transform:scale(1.1) rotate(5deg);box-shadow:0 8px 25px rgba(0,0,0,.25);color:var(--white)}.cart-badge{position:absolute;top:0;right:0;background-color:var(--danger-light);color:var(--white);border-radius:var(--radius-circle);width:24px;height:24px;line-height:24px;font-size:12px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}.back-to-top{position:fixed;right:25px;bottom:95px;width:50px;height:50px;line-height:50px;text-align:center;background:linear-gradient(135deg,var(--success-dark),var(--success-light));color:var(--white);border-radius:var(--radius-circle);opacity:0;visibility:hidden;z-index:998;transition:var(--transition-standard);cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.15)}.back-to-top.show{opacity:1;visibility:visible}.back-to-top:hover{transform:scale(1.1);box-shadow:0 8px 25px rgba(0,0,0,.25)}#audio-play{position:fixed;bottom:95px;right:25px;z-index:999}#audio-btn{width:50px;height:50px;border-radius:var(--radius-circle);background:linear-gradient(135deg,var(--success-dark),var(--success-light));text-align:center;line-height:50px;color:var(--white);box-shadow:0 5px 20px rgba(0,0,0,.2);cursor:pointer;font-size:20px;transition:var(--transition-standard)}#audio-btn:hover{transform:scale(1.1);box-shadow:0 8px 25px rgba(0,0,0,.25)}#audio-btn:after{content:"\f028";font-family:'FontAwesome'}#audio-btn.off:after{content:"\f026"}#audio-btn.on{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.animated{animation-duration:1s;animation-fill-mode:both}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}.fadeInUp{animation-name:fadeInUp}.footer{margin-top:40px;padding:30px 0;text-align:center;color:var(--text-muted)}.footer p{margin:8px 0}.footer-heart{color:var(--danger-light);animation:heartBeat 1.5s infinite}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.modal-content{border-radius:var(--radius-lg);overflow:hidden;border:none;box-shadow:0 10px 40px rgba(0,0,0,.1)}.modal-header{background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));color:var(--white);border-bottom:none;padding:var(--space-lg)}.modal-title{font-weight:600}.modal-body{padding:25px}.modal-footer{border-top:1px solid rgba(0,0,0,.05);padding:var(--space-lg)}@media (min-width:576px){.product-grid-item{width:50%}}@media (min-width:768px){.product-grid-item{width:33.333%}.product-card-name{font-size:15px}.nav-tabs>li>a{padding:6px 12px;font-size:13px}.search-input{padding:12px 15px;font-size:14px}.search-button{padding:0 20px}}@media (min-width:992px){.product-grid-item{width:25%!important;max-width:25%!important;flex:0 0 25%!important}.product-card{min-height:110px!important}.product-card-action .btn-sm{padding:4px 8px!important;font-size:12px!important;white-space:nowrap!important}.product-card-action .btn-sm i{margin-right:2px!important}.product-card-price{font-size:14px!important;margin-right:5px!important}}@media (min-width:1200px) and (max-width:1599px){.product-grid-item{width:25%!important;max-width:25%!important;flex:0 0 25%!important}.product-card-action .btn-sm{padding:4px 10px!important;font-size:12px!important}}@media (min-width:1600px){.product-grid-item{width:20%!important;max-width:20%!important;flex:0 0 20%!important}.product-card-action .btn-sm{padding:5px 12px!important;font-size:12px!important}}