/* =====================================================
   MOBILE RESPONSIVE - GIAO DIỆN NGƯỜI DÙNG
   File: Content/mobile-frontend.css
   Thêm vào _Layout.cshtml:
   <link rel="stylesheet" href="~/Content/mobile-frontend.css" />
   ===================================================== */

/* ── BREAKPOINTS
   xs: < 576px   (điện thoại nhỏ)
   sm: 576-768px (điện thoại lớn)
   md: 768-992px (tablet)
   ─────────────────────────────── */

/* =====================================================
   TOP BAR
   ===================================================== */
@media (max-width: 768px) {
    .top-bar {
        font-size: .72rem;
        padding: 6px 12px;
        text-align: center;
    }
}

/* =====================================================
   NAVBAR TOP ROW (Logo + Search + Icons)
   ===================================================== */
@media (max-width: 768px) {
    .navbar-top-row .container {
        padding: 8px 12px;
    }

    .navbar-top-row .d-flex {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Logo */
    .navbar-top-row a img {
        height: 48px !important;
    }

    /* Search bar hiện trên mobile */
    .search-bar {
        display: flex !important;
        order: 3;
        width: 100%;
        flex: 1 1 100%;
    }

    .search-bar input {
        font-size: .85rem;
        padding: 8px 12px;
    }

    /* Icons: đăng nhập + giỏ hàng */
    .nav-icon-btn span {
        display: none;
    }

    .nav-icon-btn {
        padding: 6px;
    }

    .nav-icon-btn i {
        font-size: 1.2rem;
    }

    /* Ẩn lang switcher trên mobile nhỏ */
    .lang-switcher {
        display: none;
    }
}

@media (max-width: 576px) {
    .navbar-top-row a img {
        height: 40px !important;
    }
}

/* =====================================================
   NAVBAR CATEGORY ROW
   ===================================================== */
@media (max-width: 768px) {
    .navbar-cat-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .navbar-cat-row::-webkit-scrollbar {
        display: none;
    }

    .cat-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 8px 12px;
        margin: 0;
        white-space: nowrap;
    }

    .cat-nav li a {
        font-size: .78rem;
        padding: 6px 12px;
        border-radius: 20px;
        white-space: nowrap;
        display: inline-block;
    }

    /* Ẩn mega menu trên mobile */
    .mega-menu {
        display: none !important;
    }

    .btn-all-cats {
        font-size: .78rem;
        padding: 6px 12px;
        border-radius: 20px;
    }
}

/* =====================================================
   HERO BANNER
   ===================================================== */
@media (max-width: 768px) {
    section img[alt*="Phú Thái"],
    .hero-banner img,
    section > img {
        max-height: 220px !important;
        object-position: center center !important;
    }
}

@media (max-width: 576px) {
    section img[alt*="Phú Thái"],
    section > img {
        max-height: 180px !important;
    }
}

/* =====================================================
   PRODUCT CARDS - Danh sách sản phẩm
   ===================================================== */
@media (max-width: 768px) {
    /* 2 sản phẩm / hàng trên mobile */
    .col-lg-3.col-md-4 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .prod-card {
        border-radius: 8px;
    }

    .prod-card .prod-img {
        height: 100%;
    }

    .prod-card .prod-body {
        padding: 8px;
    }

    .prod-card .prod-name {
        font-size: .82rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .prod-card .prod-price {
        font-size: .9rem;
    }

    .prod-card .prod-old-price {
        font-size: .75rem;
    }

    /* Ẩn nút thêm giỏ hàng hover trên mobile, dùng tap */
    .prod-card .prod-actions {
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        padding: 4px 8px 8px;
    }

    .prod-card .btn-cart {
        width: 100%;
        font-size: .78rem;
        padding: 7px;
    }
}

@media (max-width: 400px) {
    .prod-card .prod-img {
        height: 100%;
    }

    .col-lg-3.col-md-4 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* =====================================================
   FLASH SALE SECTION
   ===================================================== */
@media (max-width: 768px) {
    .flash-sale-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start !important;
    }

    .countdown-wrap {
        font-size: .8rem;
    }

    .countdown-item {
        min-width: 36px;
        padding: 4px 6px;
    }
}

/* =====================================================
   SECTION TITLES
   ===================================================== */
@media (max-width: 768px) {
    .sec-title {
        font-size: 1.3rem;
    }

    .sec-label {
        font-size: .7rem;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* =====================================================
   CHI TIẾT SẢN PHẨM
   ===================================================== */
@media (max-width: 768px) {
    /* Ảnh sản phẩm */
    .prod-detail-img-wrap {
        margin-bottom: 16px;
    }

    .prod-detail-main-img {
        max-height: 280px;
        width: 100%;
        object-fit: contain;
    }

    .prod-thumb-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .prod-thumb-list img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
    }

    /* Thông tin sản phẩm */
    .prod-detail-price {
        font-size: 1.4rem;
    }

    .prod-detail-old-price {
        font-size: .9rem;
    }

    /* Nút thêm giỏ hàng */
    .btn-add-cart,
    .btn-buy-now {
        width: 100%;
        margin-bottom: 8px;
        padding: 12px;
        font-size: .9rem;
    }

    /* Sticky bottom bar cho trang chi tiết sp */
    .sticky-cart-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 10px 16px;
        display: flex;
        gap: 8px;
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    }

    .sticky-cart-bar .btn-add-cart,
    .sticky-cart-bar .btn-buy-now {
        margin-bottom: 0;
        flex: 1;
    }

    /* Tabs thông tin sản phẩm */
    .nav-tabs .nav-link {
        font-size: .8rem;
        padding: 8px 12px;
    }
}

/* =====================================================
   GIỎ HÀNG
   ===================================================== */
@media (max-width: 768px) {
    /* Ẩn cột header bảng */
    .cart-table thead {
        display: none;
    }

    .cart-table tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 12px;
        position: relative;
    }

    .cart-table td {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border: none;
        font-size: .85rem;
    }

    .cart-table td::before {
        content: attr(data-label);
        font-weight: 600;
        min-width: 80px;
        font-size: .78rem;
        color: #888;
    }

    .cart-table td img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
    }

    /* Order summary */
    .cart-summary {
        margin-top: 16px;
    }

    .cart-summary .card {
        border-radius: 12px;
    }
}

/* =====================================================
   THANH TOÁN / ĐẶT HÀNG
   ===================================================== */
@media (max-width: 768px) {
    .checkout-form .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
    }

    .checkout-summary {
        margin-top: 20px;
    }

    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .payment-method-item {
        padding: 12px;
        border-radius: 8px;
        font-size: .85rem;
    }
}

/* =====================================================
   TRANG ĐĂNG NHẬP / ĐĂNG KÝ
   ===================================================== */
@media (max-width: 576px) {
    .auth-card {
        margin: 16px;
        border-radius: 12px;
        padding: 24px 20px;
    }

    .auth-card .form-control {
        font-size: .9rem;
        padding: 10px 12px;
    }

    .auth-card .btn {
        width: 100%;
        padding: 12px;
        font-size: .9rem;
    }
}

/* =====================================================
   LIÊN HỆ
   ===================================================== */
@media (max-width: 768px) {
    .contact-info-wrap {
        margin-bottom: 24px;
    }

    .contact-map iframe {
        height: 220px;
    }

    .ci-val {
        font-size: .82rem;
    }
}

/* =====================================================
   FOOTER
   ===================================================== */
@media (max-width: 768px) {
    .footer {
        padding-top: 2rem !important;
    }

    .footer .col-6.col-lg-2 {
        width: 50%;
        flex: 0 0 50%;
    }

    .footer-brand img {
        height: 48px !important;
    }

    .footer p {
        font-size: .8rem;
    }

    .footer-title {
        font-size: .85rem;
        margin-bottom: 8px;
    }

    .footer ul li a {
        font-size: .8rem;
    }

    /* Newsletter input */
    .footer .d-flex.gap-2 input {
        font-size: .82rem;
    }

    /* Copyright bar */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        font-size: .75rem;
    }
}

/* =====================================================
   MOBILE BOTTOM NAVIGATION BAR
   Thanh điều hướng dưới cùng (như app)
   ===================================================== */
@media (max-width: 768px) {
    /* Tạo khoảng trống để tránh bị che */
    body {
        padding-bottom: 64px;
    }

    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #eee;
        z-index: 1050;
        height: 58px;
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }

    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #888;
        font-size: .64rem;
        transition: color .2s;
    }

    .mobile-bottom-nav a i {
        font-size: 1.25rem;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover {
        color: var(--primary, #E65100);
    }

    .mobile-bottom-nav a .cart-badge {
        position: absolute;
        top: 6px;
        font-size: .6rem;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
    }
}

/* Ẩn bottom nav trên desktop */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* =====================================================
   SWIPER / SLIDER
   ===================================================== */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 28px;
        height: 28px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: .85rem;
    }
}

/* =====================================================
   TIN TỨC
   ===================================================== */
@media (max-width: 768px) {
    .news-card .card-img-top {
        height: 160px;
        object-fit: cover;
    }

    .news-card .card-title {
        font-size: .9rem;
    }

    .news-card .card-text {
        font-size: .8rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* =====================================================
   PAGINATION
   ===================================================== */
@media (max-width: 576px) {
    .pagination .page-link {
        padding: 5px 10px;
        font-size: .8rem;
    }
}

/* =====================================================
   ALERT / TOAST
   ===================================================== */
@media (max-width: 576px) {
    .alert {
        font-size: .82rem;
        padding: 10px 14px;
    }
}

/* =====================================================
   FILTER SIDEBAR (trang danh sách sản phẩm)
   ===================================================== */
@media (max-width: 768px) {
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 1060;
        overflow-y: auto;
        transition: left .3s ease;
        padding: 20px 16px;
        box-shadow: 4px 0 20px rgba(0,0,0,.15);
    }

    .filter-sidebar.open {
        left: 0;
    }

    .filter-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1055;
    }

    .filter-overlay.open {
        display: block;
    }

    .btn-open-filter {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        font-size: .85rem;
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
        cursor: pointer;
    }
}

@media (min-width: 769px) {
    .btn-open-filter {
        display: none !important;
    }
}