/* Theme Colors */
:root { 
    --keypop-red: #AF092A; 
    --keypop-gray: #2D3135; 
    --keypop-white: #FFFFFF; 
    --keypop-light: #F8F9FA; 
}

body { 
    background-color: var(--keypop-light); 
    color: var(--keypop-gray); 
    font-family: 'Kanit', sans-serif; 
    font-weight: 300; 
}

/* Navbar & Logo */
.navbar { background-color: var(--keypop-white); box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1030; }
.logo-img { width: 80px; height: 80px; object-fit: cover; border-radius: 15px; }
.navbar-nav .nav-link { color: var(--keypop-gray); font-size: 1.1rem; margin-left: 15px; transition: color 0.3s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active-link { color: var(--keypop-red); }

/* Common UI */
.section-title { color: var(--keypop-gray); border-left: 5px solid var(--keypop-red); padding-left: 15px; margin-bottom: 30px; font-weight: 400; text-transform: uppercase; }
footer { background-color: var(--keypop-gray); color: var(--keypop-white); }

/* Floating Cart */
.floating-cart { 
    position: fixed; bottom: 30px; right: 30px; width: 65px; height: 65px; 
    background-color: var(--keypop-white); border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.2); cursor: pointer; z-index: 1050; 
    transition: transform 0.3s; border: 2px solid var(--keypop-red); text-decoration: none; color: inherit; 
}
.floating-cart:hover { transform: scale(1.05); color: inherit; }
.cart-icon { font-size: 1.8rem; }
.cart-badge { 
    position: absolute; top: -5px; right: -5px; background-color: var(--keypop-red); color: white; 
    width: 25px; height: 25px; border-radius: 50%; display: flex; justify-content: center; 
    align-items: center; font-size: 0.9rem; font-weight: bold; 
}

/* ------------------ เฉพาะหน้า Home (index.html) ------------------ */
.carousel-item img { width: 100%; aspect-ratio: 1918 / 734; object-fit: cover; background-color: var(--keypop-gray); }
.carousel-action-btn { position: absolute; right: 5%; bottom: 12%; z-index: 10; }
.btn-theme-red { 
    background-color: var(--keypop-red); color: var(--keypop-white); font-size: 1.2rem; 
    font-weight: 300; padding: 12px 30px; border-radius: 50px; border: 2px solid var(--keypop-red); 
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(175, 9, 42, 0.4); 
}
.btn-theme-red:hover { background-color: var(--keypop-white); color: var(--keypop-red); border: 2px solid var(--keypop-red); }

.carousel-indicators { bottom: 20px; }
.carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; background-color: var(--keypop-white); opacity: 0.6; transition: all 0.4s ease; border: none; margin: 0 6px; }
.carousel-indicators .active { width: 35px; border-radius: 10px; background-color: var(--keypop-red); opacity: 1; }

.news-card { border: none; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease; height: 100%; overflow: hidden; }
.news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); cursor: pointer; }
.news-date { color: var(--keypop-red); font-size: 0.9rem; font-weight: 300; }