.hero-carousel{position:relative;width:100%;max-width:1200px;margin:20px auto 40px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.1);background:#0f172a;aspect-ratio:16/7}@media (max-width:768px){.hero-carousel{aspect-ratio:16/9;margin:10px auto 20px;border-radius:12px}}.carousel-track{display:flex;transition:transform 0.5s cubic-bezier(0.25,1,0.5,1);height:100%}.carousel-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.carousel-slide img.bg-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:none}@media (min-width:769px){.carousel-slide img.bg-image{transition:transform 8s ease}.carousel-slide:hover img.bg-image{transform:scale(1.03)}}.slide-content{position:relative;z-index:2;text-align:center;color:white;padding:20px;max-width:800px;opacity:0;transform:translateY(20px);transition:all 0.6s ease 0.3s}.carousel-slide.active .slide-content{opacity:1;transform:translateY(0)}.slide-title{font-size:3rem;font-weight:800;margin-bottom:10px;letter-spacing:-1px;background:linear-gradient(to right,#ffffff,#e0e0e0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 20px rgba(0,0,0,0.3)}.slide-desc{font-size:1.2rem;color:rgba(255,255,255,0.9);margin-bottom:25px;font-weight:500}.slide-btn{display:inline-block;padding:12px 30px;background:#004998;color:white;font-weight:700;border-radius:50px;text-decoration:none;box-shadow:0 4px 15px rgba(0,73,152,4);transition:all 0.3s ease}.slide-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,73,152,0.6);background:#003a7a}@media (max-width:768px){.slide-title{font-size:2rem}.slide-desc{font-size:1rem}.slide-btn{padding:10px 24px;font-size:0.9rem}}.carousel-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s ease}.dot.active{background:#004998;transform:scale(1.2);width:25px;border-radius:10px}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0.3);color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all 0.2s;backdrop-filter:blur(5px)}.carousel-arrow:hover{background:rgba(0,0,0,0.6)}.carousel-arrow.prev{left:20px}.carousel-arrow.next{right:20px}@media (max-width:768px){.carousel-arrow{display:none}}.institutional-slide{background:linear-gradient(135deg,#004998,#0072ff)}.institutional-content{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:40px 60px;gap:40px}@media (max-width:768px){.institutional-content{flex-direction:column;justify-content:center;padding:30px 20px;gap:25px}}.institutional-left{flex:1}.institutional-title{font-size:3.5rem;font-weight:800;color:white;margin-bottom:10px;letter-spacing:-2px}.institutional-subtitle{font-size:1.3rem;color:rgba(255,255,255,0.9);font-weight:500}@media (max-width:768px){.institutional-title{font-size:1.8rem;line-height:1.2}.institutional-subtitle{font-size:1rem;line-height:1.4}}.institutional-right{flex:1}.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width:768px){.benefit-grid{gap:15px}}.benefit-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px;background:rgba(255,255,255,0.15);border-radius:12px;backdrop-filter:blur(10px);transition:all 0.3s ease}.benefit-item:hover{background:rgba(255,255,255,0.25);transform:translateY(-5px)}.benefit-icon{font-size:2.5rem;color:white}.benefit-text{font-size:0.95rem;color:white;font-weight:600}@media (max-width:768px){.benefit-item{padding:15px 10px}.benefit-icon{font-size:2rem}.benefit-text{font-size:0.85rem}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.skeleton{background:#e0e0e0;background-image:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0 50%,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite linear;border-radius:8px}.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:20px 0}.skeleton-card{background:white;padding:15px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.05);display:flex;flex-direction:column;gap:15px;height:400px;position:relative;overflow:hidden;border:1px solid #eee}.skeleton-frame{width:100%;aspect-ratio:1/1;border-radius:8px;background:#ddd}.skeleton-text-lg{height:20px;width:90%;background:#ddd;border-radius:4px}.skeleton-text-md{height:16px;width:60%;background:#ddd;border-radius:4px}.skeleton-price{height:24px;width:40%;background:#ddd;border-radius:4px;margin-top:10px}.skeleton-btn{height:45px;width:100%;margin-top:auto;background:#ddd;border-radius:8px}.bottom-nav{display:none;position:fixed;bottom:0;left:0;width:100%;height:70px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 -5px 20px rgba(0,0,0,0.05);z-index:1000;justify-content:center;gap:40px;align-items:center;border-top:1px solid rgba(0,0,0,0.05);padding-bottom:env(safe-area-inset-bottom)} [data-theme="dark"] .bottom-nav{background:rgba(30,30,30,0.95);border-top:1px solid rgba(255,255,255,0.05)}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-text);text-decoration:none;font-size:0.75rem;font-weight:500;gap:4px;transition:all 0.2s ease;width:100%;height:100%}.nav-item i{font-size:1.3rem;margin-bottom:2px;transition:transform 0.2s ease}.nav-item.active{color:var(--primary)}.nav-item.active i{transform:translateY(-2px)}.nav-item:active{transform:scale(0.95)}.icon-container{position:relative;display:inline-block}.icon-container .badge{position:absolute;top:-5px;right:-8px;background:var(--primary);color:white;font-size:0.65rem;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white} [data-theme="dark"] .icon-container .badge{border-color:#1e1e1e}@media (max-width:768px){.bottom-nav{display:flex}body{padding-bottom:90px}}.shopee-filter-box{background-color:#f8faff;border:1px solid #e5edfa;padding:30px;display:flex;align-items:flex-start;border-radius:6px;margin-bottom:25px;gap:40px}@media (max-width:600px){.shopee-filter-box{flex-direction:column;gap:20px;padding:20px;align-items:center}}.shopee-rating-summary{text-align:left;color:#004998;min-width:140px;flex-shrink:0}.rating-score{font-size:3rem;font-weight:500;line-height:1;color:#004998}.rating-max{font-size:1.5rem;color:#004998;opacity:0.8;margin-left:2px}.rating-stars-large{font-size:1.5rem;margin-top:10px;color:#004998}.shopee-filter-buttons{display:flex;flex-wrap:wrap;gap:10px;flex:1}.s-filter-btn{height:40px;line-height:38px;padding:0 20px;border:1px solid rgba(0,0,0,.09);background:#fff;color:rgba(0,0,0,.87);border-radius:2px;cursor:pointer;font-size:0.95rem;user-select:none;transition:all 0.1s;white-space:nowrap}.s-filter-btn:hover{border-color:#ee4d2d;color:#004998}.s-filter-btn.active{border-color:#ee4d2d;color:#004998;fill:#ee4d2d;font-weight:500}.hero-image{position:relative;display:flex;justify-content:center;align-items:center;height:500px}.visual-scene{position:relative;width:100%;height:100%}.floating-box-container{position:absolute;top:10%;left:10%;width:250px;height:250px;background:linear-gradient(145deg,#1a1a1a,#2a2a2a);border-radius:20px;border:2px solid var(--primary);box-shadow:0 10px 30px rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;flex-direction:column;animation:float 6s ease-in-out infinite;will-change:transform;z-index:2}.floating-box-container i.main-icon{font-size:5rem;color:var(--primary);margin-bottom:10px}.floating-items{display:flex;gap:15px}.floating-items i{font-size:2rem;color:#fff;animation:float-items 4s ease-in-out infinite}.floating-items i:nth-child(2){animation-delay:1s}.floating-items i:nth-child(3){animation-delay:2s}.speed-box-container{position:absolute;bottom:15%;right:5%;width:280px;height:160px;background:linear-gradient(90deg,#ff471a,#ff6b3d);border-radius:15px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:-20px 0 40px rgba(255,71,26,0.4);transform:skewX(-10deg);animation:speed-hover 3s infinite alternate;z-index:3}.speed-box-content{text-align:center;transform:skewX(10deg)}.speed-box-content i{font-size:4rem;margin-bottom:5px}.speed-lines{position:absolute;left:-50px;top:50%;width:100px;height:2px;background:rgba(255,255,255,0.5);box-shadow:0 10px 0 rgba(255,255,255,0.3),0 -10px 0 rgba(255,255,255,0.3);animation:speed-lines 1s linear infinite}@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-20px)}}@keyframes float-items{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes speed-hover{0%{transform:skewX(-10deg) translateX(0)}100%{transform:skewX(-10deg) translateX(10px)}}@keyframes speed-lines{0%{opacity:0;transform:translateX(20px)}50%{opacity:1}100%{opacity:0;transform:translateX(-20px)}}@media (max-width:768px){.hero-image{height:220px}.floating-box-container{width:140px;height:140px;top:10px;left:0;border-radius:12px}.speed-box-container{width:150px;height:100px;bottom:0;right:0;border-radius:10px}.floating-box-container i.main-icon{font-size:2.5rem;margin-bottom:5px}.floating-items i{font-size:1.2rem;gap:8px}.speed-box-content i{font-size:2rem}.speed-box-content div{font-size:0.9rem !important}}