/* ============================================================
   VÔ TƯ NHƯ HÒN SỎI — stylesheet
   Ý tưởng: một góc đọc sách yên tĩnh lúc chiều muộn — giấy cũ,
   mực xanh đậm và ánh đèn vàng ấm. Hoạ tiết "sỏi xếp tầng"
   (::before của .logo-brand và .section-title) là chi tiết
   xuyên suốt, gợi tên thương hiệu.
   ============================================================ */

:root {
    --ink: #18243B;          /* xanh mực đậm — nav, heading */
    --ink-soft: #2A3A57;
    --teal: #2F6B5E;         /* xanh lá trầm — link, hover phụ */
    --gold: #D8A23B;         /* vàng đồng — CTA, badge, giá nhấn */
    --gold-deep: #B9842A;
    --terra: #C1583B;        /* đất nung — giảm giá / cảnh báo */
    --parchment: #F6F1E6;    /* giấy cũ — nền trang */
    --parchment-dark: #ECE3D1;
    --charcoal: #2A2622;     /* mực chữ thường */
    --line: #D9CFB8;

    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --radius: 14px;
    --shadow-soft: 0 10px 30px -12px rgba(24, 36, 59, 0.25);
    --shadow-lift: 0 18px 40px -14px rgba(24, 36, 59, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }

body {
    background: var(--parchment);
    color: var(--charcoal);
    font-family: var(--font-body);
    line-height: 1.6;
}

a { color: var(--teal); }
a:hover { color: var(--gold-deep); }

/* ---------- Thanh điều hướng ---------- */
.navbar {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    box-shadow: var(--shadow-soft);
}

.logo-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--parchment) !important;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* hoạ tiết "sỏi xếp tầng" trước logo */
.logo-brand::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 16px;
    background-image:
        radial-gradient(ellipse 9px 4.5px at 50% 85%, var(--gold) 98%, transparent 100%),
        radial-gradient(ellipse 7px 3.5px at 50% 50%, var(--terra) 98%, transparent 100%),
        radial-gradient(ellipse 5px 2.5px at 50% 18%, var(--teal) 98%, transparent 100%);
    flex-shrink: 0;
}

.navbar .nav-link {
    color: rgba(246, 241, 230, 0.85) !important;
    font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--gold) !important;
}

.navbar .form-control {
    border: 1px solid transparent;
    background: rgba(246, 241, 230, 0.95);
}
.navbar .form-control:focus {
    box-shadow: 0 0 0 3px rgba(216, 162, 59, 0.35);
    border-color: var(--gold);
}

.btn-warning {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--ink) !important;
}
.btn-warning:hover {
    background: var(--gold-deep) !important;
    border-color: var(--gold-deep) !important;
}

/* ---------- Banner ---------- */
.hero-banner {
    height: 360px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--teal) 120%);
}
.hero-banner img { mix-blend-mode: luminosity; opacity: 0.55; }
.hero-banner h1 {
    font-family: var(--font-display);
    font-weight: 700;
}
.hero-banner .lead { font-family: var(--font-body); }

/* ---------- Tiêu đề khu vực ---------- */
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    position: relative;
    padding-left: 18px;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 8%;
    height: 84%;
    width: 6px;
    background: var(--gold);
    border-radius: 6px;
}

.sort-pill {
    background: #fff;
    border: 1px solid var(--line) !important;
}

/* ---------- Thẻ sách ---------- */
.book-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
}
.book-card .thumb-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--parchment-dark);
}
.book-card .thumb-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.book-card:hover .thumb-wrap img { transform: scale(1.06); }

.book-card .category-tag {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(24, 36, 59, 0.85);
    color: var(--parchment);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.book-card .delete-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(193, 88, 59, 0.92);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.book-card:hover .delete-btn { opacity: 1; }
.book-card .delete-btn:hover { background: var(--terra); }

.book-card .card-body-custom {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.book-card .book-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.book-card .book-author {
    font-size: 0.85rem;
    color: #6b6258;
    margin-bottom: 10px;
}
.book-card .book-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--terra);
    font-size: 1.05rem;
    margin-top: auto;
    margin-bottom: 12px;
}
.book-card .btn-add-cart {
    background: var(--ink);
    color: var(--parchment);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 0;
    transition: background 0.2s ease;
}
.book-card .btn-add-cart:hover { background: var(--gold-deep); color: var(--ink); }

/* ---------- Giỏ hàng (offcanvas) ---------- */
.offcanvas-header { background: var(--parchment-dark); }
.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.cart-item img {
    width: 56px; height: 72px; object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.cart-item .qty-control {
    display: flex; align-items: center; gap: 8px;
}
.cart-item .qty-control button {
    width: 26px; height: 26px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 6px;
}
.cart-empty-state {
    text-align: center;
    color: #998f81;
    padding: 60px 20px;
}

/* ---------- Footer ---------- */
.footer-custom {
    background: var(--ink);
    color: rgba(246, 241, 230, 0.85);
}
.footer-custom .logo-brand { color: var(--parchment) !important; }
.hover-white:hover { color: #fff !important; }

/* ---------- Trạng thái rỗng ---------- */
.empty-state {
    text-align: center;
    padding: 70px 20px;
    color: #998f81;
    font-family: var(--font-display);
    font-size: 1.2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .hero-banner { height: 240px; }
    .hero-banner h1 { font-size: 1.8rem; }
}

/* ---------- Thanh thống kê nhanh ---------- */
.stat-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 10px;
    text-align: center;
}
.stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--ink);
    line-height: 1;
}
.stat-label {
    font-size: 0.8rem;
    color: #8a8071;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

/* ---------- Chip lọc danh mục ---------- */
.category-chip {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--charcoal);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 7px 18px;
    border-radius: 999px;
    transition: all 0.2s ease;
}
.category-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.category-chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--parchment);
}

/* ---------- Nhãn "Mới" trên thẻ sách ---------- */
.ribbon-moi {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
}

/* ---------- Nút cuộn lên đầu trang ---------- */
.back-to-top {
    position: fixed;
    bottom: 26px; right: 26px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--parchment);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1050;
}
.back-to-top.hien {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--gold-deep); color: var(--ink); }

/* ---------- Focus rõ ràng cho bàn phím ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
/* ---------- Hiệu ứng Skeleton Loading ---------- */
.skeleton {
    background: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1.2s ease infinite;
    border-radius: 8px;
}

@keyframes shine {
    to { background-position: right -40px top 0; }
}

.skeleton-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding-bottom: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius) var(--radius) 0 0;
}

.skeleton-text {
    height: 16px;
    margin: 16px 16px 4px 16px;
}

.skeleton-text.short {
    width: 50%;
    margin-top: 8px;
}

.skeleton-btn {
    height: 38px;
    margin: auto 16px 0 16px;
    border-radius: 10px;
}
/* ============================================================
   GÓI NÂNG CẤP SIÊU ĐỈNH VŨ TRỤ (UI/UX 3D & ANIMATION)
   ============================================================ */

/* 1. CUSTOM SCROLLBAR (Thanh cuộn phong cách hoàng gia) */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--parchment-dark);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    border-radius: 10px;
    border: 3px solid var(--parchment-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--terra);
}

/* 2. HIỆU ỨNG THẺ SÁCH 3D LƠ LỬNG & PHÁT SÁNG VÀNG ĐỒNG */
.book-card {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform-origin: center bottom;
}
.book-card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 50px -12px rgba(216, 162, 59, 0.35), 0 10px 20px rgba(24, 36, 59, 0.15) !important;
    border-color: var(--gold) !important;
    z-index: 10;
}

/* 3. HIỆU ỨNG PARALLAX ZOOM CHO BANNER */
.hero-banner {
    overflow: hidden;
}
.hero-banner img {
    transition: transform 12s linear !important;
}
.hero-banner:hover img {
    transform: scale(1.15) !important;
}

/* 4. HIỆU ỨNG NÚT BẤM GLOW (Nút giỏ hàng & Thanh toán) */
.btn-warning, .btn-add-cart, .btn-primary-custom {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.btn-warning:hover, .btn-add-cart:hover, .btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(216, 162, 59, 0.5) !important;
}
.btn-warning:active, .btn-add-cart:active {
    transform: translateY(1px);
}

/* 5. GIAO DIỆN GLASSMORPHISM CHO NAVBAR (Mờ ảo kính cường lực) */
.navbar {
    background: rgba(24, 36, 59, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}