/* =========================================
   ROOT
========================================= */
:root {
    --bs-primary-dark: #1C1C1C;
    --bs-accent-red: #E94F45;
    --bs-section-bg: #F8F9FB;
    --bs-hero-title: #3B008A;
}

/* =========================================
   GLOBAL
========================================= */
body {
    font-family: 'Inter', sans-serif;
    color: var(--bs-primary-dark);
}

.navbar {
    border-bottom: 1px solid #e9ecef;
}

.text-accent-red {
    color: var(--bs-accent-red) !important;
}

.bg-section {
    background-color: var(--bs-section-bg);
}

/* =========================================
   BUTTONS
========================================= */
.btn-primary-dark {
    background-color: var(--bs-primary-dark);
    color: white;
    border-color: var(--bs-primary-dark);
    transition: background-color 0.3s;
}

.btn-primary-dark:hover {
    background-color: #333333;
    border-color: #333333;
}

.btn-outline-dark-custom {
    border: 1px solid var(--bs-primary-dark);
    color: var(--bs-primary-dark);
}

.btn-outline-dark-custom:hover {
    background-color: #F0F0F0;
}

/* =========================================
   HERO SECTION (INDEX)
========================================= */
.hero-section {
    background: linear-gradient(90deg, #FFF 0%, #FFF 50%, rgba(248, 249, 251, 0.8) 100%);
}

.hero-title {
    color: var(--bs-hero-title);
    font-weight: 900;
}

/* =========================================
   BOOK COVER (DÙNG CHO INDEX + GIỚI THIỆU)
   → KHÔNG DÙNG TỈ LỆ 3:4 Ở ĐÂY
========================================= */
.book-cover {
    width: 100%;
    height: 280px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background-size: cover;
    background-position: center;
}

.book-cover.large {
    height: 400px;
}

/* =========================================
   FIX TỈ LỆ 3:4 CHO PRODUCT PAGE
========================================= */
.product-item .book-cover {
    height: 0 !important;
    padding-bottom: 133.33% !important; /* 3:4 */
}

/* =========================================
   BOOK COVER MAPPING (ĐÚNG THEO TÊN ẢNH CỦA EM)
========================================= */
.book-cover-1  { background-image: url('../img/datrungphuongnam.jpg'); }
.book-cover-2  { background-image: url('../img/toilaai.jpg'); }
.book-cover-3  { background-image: url('../img/Hoangtube.jpg'); }
.book-cover-4  { background-image: url('../img/harry.jpg'); }
.book-cover-5  { background-image: url('../img/doingandungngudai.jpg'); }
.book-cover-6  { background-image: url('../img/dacnhantam.jpg'); }
.book-cover-7  { background-image: url('../img/onggiavabienca.jpeg'); }
.book-cover-8  { background-image: url('../img/daiduongden.jpg'); }
.book-cover-9  { background-image: url('../img/tuduynguoc.jpg'); }
.book-cover-10 { background-image: url('../img/matbiec.jpg'); }
.book-cover-11 { background-image: url('../img/alice.jpg'); }
.book-cover-12 { background-image: url('../img/peter.jpg'); }
.book-cover-13 { background-image: url('../img/nhungngoisaokhonkho.jpg'); }
.book-cover-14 { background-image: url('../img/chuthonhutnhta.jpg'); }
.book-cover-15 { background-image: url('../img/suoinguon.jpg'); }
.book-cover-16 { background-image: url('../img/cavoi.jpg'); }

/* =========================================
   CATEGORY ACTIVE (PRODUCT PAGE)
========================================= */
#category-filter a {
    color: #333;
    display: block;
    padding: 4px 0;
    font-weight: 500;
    text-decoration: none;
}

#category-filter a:hover {
    color: #0d6efd;
}

#category-filter a.active-category {
    color: #0d6efd;
    font-weight: 700;
}

/* =========================================
   ABOUT PAGE
========================================= */
.about-featured-books .book-cover {
    height: 250px;
}

.about-illustration {
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.about-text p {
    color: #555;
    line-height: 1.6;
}

/* =========================================
   SCROLLING
========================================= */
.scrolling-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.scrolling-content {
    display: inline-flex;
    gap: 40px;
    animation: scroll-left 18s linear infinite;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* ===============================
   TOAST GIỮA MÀN HÌNH (ĐẸP)
================================ */
.toast-center {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    opacity: 0.98;
    min-width: 260px;
    text-align: center;
    border-radius: 12px;
    padding: 12px 18px;
}