/* ── RESET ── */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    * { box-sizing: border-box; }
    img { max-width: 100%; height: auto; }
    .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── NAVBAR ── */
@media (max-width: 991px) {
    .navbar { padding: 0.4rem 0 !important; }
    .navbar .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .brand-mark { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; }
    .navbar-brand .opacity-75 { display: none !important; }
    /* Collapse: nền tối, bo góc */
    .navbar-collapse.show, .navbar-collapse.collapsing {
        background: var(--navbar-bg, rgba(10,14,20,0.97));
        border-radius: 0 0 18px 18px;
        padding: 0.5rem 0.75rem 0.75rem;
        margin: 0 -12px;
        border-top: 1px solid var(--border, rgba(255,255,255,0.1));
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    /* Nav links: NẰM NGANG, scroll được */
    .navbar-collapse .navbar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 2px !important;
        padding-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .navbar-collapse .navbar-nav::-webkit-scrollbar { display: none; }
    .navbar-collapse .nav-link {
        padding: 0.4rem 0.7rem !important;
        border-radius: 20px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        flex-shrink: 0;
    }
    .navbar-collapse .nav-item.px-3.d-none.d-lg-block,
    .navbar-collapse .nav-item.d-none.d-lg-block { display: none !important; }
}

/* ── HERO BANNER ── */
@media (max-width: 767px) {
    .hero-wrap { border-radius: 16px; margin: 0 !important; }
    .hero-wrap .container-fluid { padding: 1.75rem 1rem !important; }
    .hero-title { font-size: 1.35rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero-lead { font-size: 0.85rem !important; margin-bottom: 0.85rem !important; }
    .hero-search { width: 100% !important; max-width: 100% !important; }
    .hero-search .input-group { border-radius: 50px !important; overflow: hidden; }
    .hero-search .hero-search-input { font-size: 0.85rem; padding: 9px 12px 9px 16px !important; }
    .hero-search .btn { padding: 9px 16px; font-size: 0.82rem; }
}

/* ── SIDEBAR DANH MỤC: chip scroll ngang ── */
@media (max-width: 991px) {
    aside.col-lg-3 { margin-bottom: 0.75rem; }
    aside h5.fw-bold { font-size: 0.72rem !important; margin-bottom: 0.35rem !important; }
    aside .list-group {
        display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
        overflow-x: auto !important; gap: 6px !important; padding: 0.25rem 0 !important;
        background: transparent !important; border: none !important; box-shadow: none !important;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    aside .list-group::-webkit-scrollbar { display: none; }
    aside .list-group-item {
        white-space: nowrap !important; flex-shrink: 0 !important; border-radius: 20px !important;
        padding: 0.3rem 0.8rem !important; font-size: 0.78rem !important;
        border: 1px solid var(--border) !important; background: var(--bg-elevated) !important; margin-bottom: 0 !important;
    }
    aside .list-group-item.active {
        background: linear-gradient(140deg, var(--primary), var(--primary-2)) !important;
        color: #101623 !important; border-color: transparent !important; font-weight: 700;
    }
    aside .mb-4 { margin-bottom: 0.5rem !important; }
    .container-fluid.mt-5 { margin-top: 1.25rem !important; }
}

/* ── TIÊU ĐỀ KHU VỰC SÁCH ── */
@media (max-width: 767px) {
    main .d-flex.justify-content-between.align-items-center.mb-4 { flex-wrap: nowrap !important; gap: 0.5rem; }
    main .d-flex h3 { font-size: 1rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
    main .badge.bg-warning { flex-shrink: 0; font-size: 0.72rem !important; padding: 0.3rem 0.6rem !important; white-space: nowrap; }
}

/* ── GRID SÁCH: 2 CỘT (Shopee style) ── */
@media (max-width: 991px) {
    .row.g-4 > .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 5px !important; padding-right: 5px !important; }
    .row.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
}
@media (max-width: 767px) {
    .card { border-radius: 14px !important; }
    .card-img-top, .book-img { height: 150px !important; object-fit: cover; border-radius: 14px 14px 0 0 !important; }
    .card-body { padding: 0.55rem 0.5rem 0.6rem !important; }
    .card-body small.text-warning, .card-body .text-warning.fw-bold.mb-1 { font-size: 0.65rem !important; display: block; margin-bottom: 0.15rem !important; }
    .card-title { font-size: 0.8rem !important; line-height: 1.3; margin-bottom: 0.2rem !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; min-height: 2.1em; }
    .card-body p.small.text-muted { font-size: 0.7rem !important; margin-bottom: 0.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-body .bi-star-fill, .card-body .bi-star { font-size: 9px !important; }
    .card-body .text-muted.small.ms-1 { font-size: 0.65rem !important; }
    .card-body .text-danger.fs-5, .card-body .fw-bold.text-danger { font-size: 0.82rem !important; }
    .card-body .border-top { padding-top: 0.4rem !important; margin-top: 0.3rem !important; }
    .book-card-actions { gap: 4px !important; }
    .book-card-actions .btn-detail-home { font-size: 0.68rem !important; padding: 0.28rem 0.35rem !important; min-height: 30px !important; border-radius: 8px !important; }
    .book-card-actions .btn-cart-home { min-width: 30px !important; width: 30px !important; padding: 0.28rem !important; border-radius: 8px !important; font-size: 0.85rem !important; }
    .card .badge.bg-danger { font-size: 0.6rem; padding: 0.2rem 0.4rem; }
}
@media (max-width: 480px) {
    /* Vẫn 2 cột trên điện thoại nhỏ */
    .row.g-4 > .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .card-img-top, .book-img { height: 130px !important; }
}

/* ── TRANG CHI TIẾT SÁCH ── */
@media (max-width: 767px) {
    .book-detail-container > .row { flex-direction: column; }
    .book-detail-container .col-md-4 { text-align: center; margin-bottom: 1rem; }
    .img-detail { max-width: 160px !important; width: 160px; height: 210px !important; object-fit: cover; border-radius: 14px; margin: 0 auto; display: block; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
    .book-info-header h1 { font-size: 1.2rem !important; }
    .detail-action-bar { flex-direction: column !important; gap: 0.5rem !important; padding: 0.85rem !important; }
    .detail-action-bar .d-flex.flex-wrap { flex-direction: column !important; width: 100%; gap: 0.4rem !important; }
    .detail-action-bar .btn { width: 100% !important; justify-content: center; font-size: 0.9rem !important; }
}

/* ── GIỎ HÀNG ── */
@media (max-width: 767px) {
    .cart-page h2 { font-size: 1.1rem !important; }
    .cart-page .table-responsive { border-radius: 14px; overflow: hidden; }
    .cart-page table { font-size: 0.78rem; }
    .cart-page table th:nth-child(2), .cart-page table td:nth-child(2) { display: none !important; }
    .btn-decrease, .btn-increase { padding: 0.18rem 0.45rem !important; font-size: 0.78rem !important; }
    .loai-select { font-size: 0.75rem !important; padding: 0.2rem 0.35rem !important; }
    .cart-page .text-end .btn { width: 100%; font-size: 0.9rem; }
}

/* ── CHECKOUT PREVIEW & SUCCESS ── */
@media (max-width: 767px) {
    .checkout-page h2 { font-size: 1.1rem !important; }
    .checkout-card { border-radius: 16px !important; padding: 1rem !important; }
    .checkout-card table { font-size: 0.78rem; }
    .checkout-page .d-flex.flex-wrap { flex-direction: column; }
    .checkout-page .btn-lg { width: 100%; font-size: 0.92rem; }
    /* Checkout success */
    .checkout-page .card { border-radius: 16px !important; }
    .checkout-page .card-body { padding: 1rem !important; }
}

/* ── FORM ĐĂNG NHẬP / ĐĂNG KÝ / QUÊN MK / ĐẶT LẠI MK ── */
@media (max-width: 767px) {
    .khung-bao-ngoai { padding: 12px 0; align-items: flex-start; min-height: auto; }
    .the-noi-dung { padding: 22px 16px !important; border-radius: 20px !important; margin: 0 8px; max-width: calc(100% - 16px) !important; }
    .auth-card-brand-icon { width: 44px !important; height: 44px !important; font-size: 1.3rem !important; }
    .tieu-de-chinh { font-size: 1.15rem !important; }
    .o-nhap-lieu input { padding: 10px 12px 10px 38px !important; font-size: 0.88rem !important; }
    .nut-bam-hong { padding: 11px 16px !important; font-size: 0.92rem !important; }
    .otp-wrapper { flex-direction: column; gap: 0.4rem; }
    .btn-otp { width: 100%; padding: 0.45rem 1rem; }
    /* Đặt lại mật khẩu */
    .auth-hint { font-size: 0.78rem !important; }
}

/* ── LỊCH SỬ MƯỢN ── */
@media (max-width: 767px) {
    .content-card { border-radius: 14px !important; margin-bottom: 0.75rem !important; }
    .content-card > .p-3 { padding: 0.75rem !important; }
    .content-card table { font-size: 0.8rem; }
    .content-card .badge { font-size: 0.7rem; }
    .content-card .d-flex.align-items-center.gap-2 { flex-wrap: wrap; }
    .content-card select.form-select-sm { width: 100% !important; }
}

/* ── THÔNG BÁO ── */
@media (max-width: 767px) {
    .content-card.p-3.mb-2 { padding: 0.65rem !important; }
    .content-card .bi.fs-5 { font-size: 1.1rem !important; }
}

/* ── TRANG ĐÁNH GIÁ (DanhGia.cshtml) ── */
@media (max-width: 767px) {
    /* Hero đánh giá */
    .text-center.py-5.mb-4 { padding: 1.5rem 0 1rem !important; }
    .text-center.py-5.mb-4 h2 { font-size: 1.2rem !important; }
    /* Layout: form + danh sách stack dọc */
    .row.g-4 > .col-lg-4, .row.g-4 > .col-lg-8 { flex: 0 0 100% !important; max-width: 100% !important; }
    /* Tab "về dịch vụ / về sách" */
    #reviewTab { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
    #reviewTab::-webkit-scrollbar { display: none; }
    #reviewTab .nav-link { white-space: nowrap; font-size: 0.82rem !important; padding: 0.4rem 0.75rem !important; }
    /* Card đánh giá */
    .content-card.p-3.mb-3 { padding: 0.65rem !important; }
    /* Avatar */
    .rounded-circle[style*="42px"] { width: 34px !important; height: 34px !important; font-size: 0.9rem !important; }
}

/* ── ĐÁNH GIÁ CỦA TÔI ── */
@media (max-width: 767px) {
    /* Thống kê 4 ô: 2 cột */
    .row.g-3 > .col-6.col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .content-card.p-3.text-center .fs-2 { font-size: 1.4rem !important; }
    /* Card đánh giá: ảnh + nội dung */
    .content-card.mb-3.p-3 { padding: 0.65rem !important; }
    .content-card img[style*="52px"] { width: 42px !important; height: 56px !important; }
    /* Nút sửa/xóa */
    .content-card .btn-sm { font-size: 0.72rem !important; padding: 0.2rem 0.45rem !important; }
}

/* ── TRANG LIÊN HỆ ── */
@media (max-width: 767px) {
    /* 3 card thông tin: stack dọc */
    .row.g-4 > .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    .content-card.p-4 { padding: 1rem !important; }
    /* Icon liên hệ nhỏ hơn */
    .content-card .bi[style*="2.5rem"] { font-size: 1.8rem !important; }
    /* Form liên hệ */
    .content-card .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .form-control-lg { font-size: 0.9rem !important; padding: 0.6rem 0.75rem !important; }
    .form-select-lg { font-size: 0.9rem !important; padding: 0.6rem 0.75rem !important; }
    .content-card .btn-lg { width: 100%; font-size: 0.92rem; }
}

/* ── TRANG GIỚI THIỆU ── */
@media (max-width: 767px) {
    /* 3 card tính năng: stack dọc */
    .row.g-3 > .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    /* Nút cuối trang */
    .d-flex.flex-wrap.gap-2.justify-content-center .btn { width: 100%; }
}

/* ── TRANG HELP ── */
@media (max-width: 767px) {
    /* 3 tab nằm ngang, scroll */
    .help-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; gap: 6px !important; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
    .help-tabs::-webkit-scrollbar { display: none; }
    .help-tabs .nav-item { flex-shrink: 0; }
    .help-tabs .nav-link { white-space: nowrap !important; font-size: 0.78rem !important; padding: 0.4rem 0.75rem !important; border-radius: 20px !important; }
    /* Tab content */
    #helpTabContent { padding: 1rem !important; }
    #helpTabContent h4.text-warning { font-size: 1rem !important; line-height: 1.35; }
    /* Các bước */
    .step-item { gap: 0.75rem; margin-bottom: 1rem !important; }
    .step-number { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; flex-shrink: 0; margin-right: 0 !important; }
    .step-item h5 { font-size: 0.9rem !important; margin-bottom: 0.2rem !important; }
    .step-item p { font-size: 0.8rem !important; margin-bottom: 0 !important; }
    /* Rule items */
    .rule-item { padding: 0.65rem 0.75rem !important; font-size: 0.82rem !important; margin-bottom: 0.5rem; }
    /* Accordion FAQ */
    .accordion-button { font-size: 0.85rem !important; padding: 0.75rem 1rem !important; }
    .accordion-body { font-size: 0.8rem !important; padding: 0.65rem 1rem !important; }
}

/* ── TRANG DANH MỤC (Categories) ── */
@media (max-width: 767px) {
    /* Grid chip thể loại */
    .container-fluid.px-lg-5 .row.g-3 > .col-6.col-md-4.col-lg-2 { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
    .category-chip { padding: 0.65rem 0.4rem !important; font-size: 0.72rem !important; border-radius: 10px !important; }
    .category-chip .bi { font-size: 1.2rem !important; }
    /* Bảng sách danh mục */
    .table-responsive { border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive table { font-size: 0.78rem; min-width: 480px; }
    /* Form tìm kiếm + sắp xếp */
    .card.bg-dark .row.g-3 > .col-md-5,
    .card.bg-dark .row.g-3 > .col-md-4,
    .card.bg-dark .row.g-3 > .col-md-3 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── PHÂN TRANG ── */
@media (max-width: 767px) {
    .pagination { gap: 3px !important; flex-wrap: wrap; justify-content: center; }
    .pagination li a, .pagination li span { min-width: 32px !important; height: 32px !important; font-size: 0.78rem !important; border-radius: 8px !important; }
}

/* ── FOOTER ── */
@media (max-width: 767px) {
    .footer-top { padding: 20px 0 14px !important; margin-top: 20px !important; }
    .footer-title { font-size: 0.82rem; margin-bottom: 0.4rem !important; }
    .footer-text, .footer-link { font-size: 0.8rem; }
    .footer-top .col-lg-4 { margin-bottom: 0.75rem; }
}

/* ── TOAST THÔNG BÁO ── */
@media (max-width: 767px) {
    .toast-container { bottom: 10px !important; right: 10px !important; left: 10px !important; width: auto !important; }
    #cartToast { width: 100% !important; font-size: 0.82rem; }
}

/* ── ADMIN MOBILE ── */
@media (max-width: 991px) {
    .sidebar-admin { display: none !important; }
    .admin-main { width: 100% !important; min-height: 100vh; }
    .btn-admin-menu { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(148,163,184,0.3); background: transparent; color: inherit; cursor: pointer; }
    .sidebar-admin.mobile-open { display: flex !important; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1055; width: 210px !important; min-width: 210px !important; box-shadow: 6px 0 24px rgba(0,0,0,0.45); overflow-y: auto; }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1054; backdrop-filter: blur(2px); }
    .sidebar-overlay.active { display: block; }
}
@media (max-width: 767px) {
    .admin-main { padding: 0.65rem !important; }
    .admin-header-bar { padding: 0.55rem 0.7rem !important; border-radius: 12px !important; margin-bottom: 0.75rem !important; }
    .admin-header-bar h4 { font-size: 0.9rem !important; }
    .col-xl-3.col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .stat-tile { padding: 0.65rem !important; border-radius: 10px !important; }
    .kpi-label { font-size: 0.65rem !important; }
    .kpi-value { font-size: 1.25rem !important; }
    .admin-card { border-radius: 12px !important; }
    .admin-card .table-responsive { border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-card table { font-size: 0.76rem; min-width: 480px; }
    .admin-card .btn-sm { padding: 0.18rem 0.4rem !important; font-size: 0.7rem !important; }
    .admin-card .row.g-3 > [class*="col-lg"] { flex: 0 0 100% !important; max-width: 100% !important; }
    .chart-wrap { height: 170px !important; }
}