/* =========================================
   RESPONSIVE TOÀN SITE
   Ghi đè cuối cùng, sau layout.css + page CSS
========================================= */

/* ---------- BREAKPOINT 1: TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {

    /* ====== HEADER / NAVBAR ====== */
    .nav {
        gap: 12px;
        padding: 10px 16px;
    }

    /* Hiện nút menu mobile, thu nhỏ logo */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.4);
        background: rgba(15, 23, 42, 0.9);
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        border-radius: 999px;
        background: #e5e7eb;
    }

    /* Ẩn menu ngang, chuyển thành menu xổ xuống */
    .nav-center {
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        background: rgba(15, 23, 42, 0.98);
        border-bottom: 1px solid rgba(31, 41, 55, 0.9);
        padding: 10px 18px 16px;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
        z-index: 40;
    }

    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }

    .nav-menu li a {
        padding: 8px 0;
    }

    /* Khi body có class nav-open -> hiện menu */
    body.nav-open .nav-center {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Nav-left (Đăng nhập / Bắt đầu) & Logo thu hẹp khoảng cách */
    .nav-left {
        gap: 8px;
    }

    .nav-right .logo-title {
        font-size: 0.95rem;
    }

    .nav-right .logo-subtitle {
        font-size: 0.72rem;
    }

    /* ====== HERO CHUNG (index, tool-detail, request-detail) ====== */
    .hero-inner,
    .tool-layout,
    .request-layout {
        flex-direction: column;
        gap: 24px;
    }

    .hero-tech-left,
    .hero-visual,
    .tool-main,
    .tool-sidebar,
    .request-main,
    .request-sidebar {
        width: 100%;
    }

    .hero-visual {
        max-width: 520px;
        margin: 0 auto;
    }

    /* ====== GRID CHUNG ====== */
    .features-grid,
    .products-grid,
    .tools-grid,
    .related-tools-grid,
    .requests-grid,
    .bids-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    /* ====== MARKET / CHỢ TOOL ====== */
    .market-layout {
        flex-direction: column;
        gap: 20px;
    }

    .market-filters {
        width: 100%;
        order: -1;
    }

    .market-results {
        width: 100%;
    }

    .market-toolbar-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .market-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    /* ====== TOOL DETAIL / REQUEST DETAIL SIDE BAR ====== */
    .tool-sidebar,
    .request-sidebar {
        max-width: none;
    }

    .sticky-buy-box,
    .request-sidebar-box {
        position: static;
    }

    /* ====== ACTION FOOTER (Thanh “Mua ngay / Gửi proposal”) ====== */
    .action-footer {
        left: 16px;
        right: 16px;
        bottom: 16px;
        border-radius: 18px;
    }
}

/* ---------- BREAKPOINT 2: MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {

    /* ====== BODY & CONTAINER ====== */
    .container {
        padding: 0 14px;
    }

    .site-header {
        padding: 6px 0;
    }

    .nav {
        padding-inline: 10px;
    }

    /* Ẩn chữ phụ logo cho đỡ chật */
    .logo-subtitle {
        display: none;
    }

    /* Nav-left: chỉ giữ nút Bắt đầu + icon login nhỏ hơn nếu muốn */
    .nav-left .nav-login {
        padding-inline: 10px;
    }

    .nav-left .nav-cta {
        padding-inline: 14px;
    }

    /* ====== HERO INDEX ====== */
    .hero {
        padding: 26px 0 32px;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .hero-kicker {
        font-size: 0.8rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* ====== SECTION CHUNG ====== */
    section {
        padding: 26px 0;
    }

    .section-header h2 {
        font-size: 1.35rem;
    }

    /* ====== PRODUCT / TOOL CARDS ====== */
    .product-card,
    .tool-card,
    .request-card {
        padding: 14px 12px;
    }

    .product-card h3,
    .tool-card h3,
    .request-card h3 {
        font-size: 0.98rem;
    }

    /* ====== MARKET PAGE ====== */
    .market-toolbar-top {
        align-items: stretch;
    }

    .market-toolbar-right {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toggle,
    .sort-select,
    .items-per-page {
        width: 100%;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    /* ====== TOOL DETAIL ====== */
    .tool-hero,
    .tool-main-section {
        padding: 18px 0;
    }

    .tool-title {
        font-size: 1.35rem;
    }

    .tool-meta-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .tool-feature-grid {
        grid-template-columns: 1fr;
    }

    .tool-gallery-main {
        height: 220px;
    }

    /* ====== REQUEST DETAIL (bids, timeline, comment…) ====== */
    .request-hero {
        margin-top: 10px;
        padding: 16px 14px;
    }

    .request-title {
        font-size: 1.25rem;
    }

    .request-hero-meta,
    .request-hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bids-grid {
        grid-template-columns: 1fr;
    }

    .bid-card {
        grid-template-columns: 1fr;
        padding: 12px 12px;
        row-gap: 10px;
    }

    .bid-actions {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .bid-actions .btn-primary,
    .bid-actions .btn-secondary {
        width: 100%;
    }

    .timeline-grid {
        grid-template-columns: 1fr;
    }

    /* ====== FINAL CTA & FOOTER ====== */
    .final-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .final-cta-content h2 {
        font-size: 1.3rem;
    }

    .final-cta-actions {
        width: 100%;
    }

    .final-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .footer-inner {
        flex-direction: column;
        gap: 18px;
    }

    .footer-columns {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 18px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    /* ====== ACTION FOOTER MOBILE ====== */
    .action-footer {
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16px 16px 0 0;
        padding: 10px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .action-footer-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .action-footer-actions {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    .action-footer-actions .btn-primary,
    .action-footer-actions .btn-secondary {
        flex: 1;
        justify-content: center;
    }
}

/* ---------- BREAKPOINT 3: ULTRA-MOBILE (<= 480px) ---------- */
@media (max-width: 480px) {

    /* ====== CONTAINER & SPACING ====== */
    .container {
        padding: 0 12px;
    }

    section {
        padding: 18px 0;
    }

    /* ====== HERO INDEX ====== */
    .hero {
        padding: 16px 0 20px;
    }

    .hero h1,
    .hero-title {
        font-size: 1.3rem;
    }

    .hero-meta {
        flex-direction: column;
        gap: 8px;
    }

    .hero-meta-item {
        min-width: auto;
    }

    .hero-dashboard-mock {
        max-width: 100%;
    }

    /* ====== GRID: 1 CỘT TUYỆT ĐỐI ====== */
    .features-grid,
    .products-grid,
    .tools-grid,
    .requests-list,
    .bids-grid {
        grid-template-columns: 1fr;
    }

    /* ====== FINAL CTA ====== */
    .final-cta-content h2 {
        font-size: 1.15rem;
    }

    /* ====== PAGE HEADER BUTTONS ====== */
    .page-header-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .page-header-actions .btn-primary,
    .page-header-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- TÙY CHỌN: GIẢM CHUYỂN ĐỘNG CHO NGƯỜI KHÔNG THÍCH ANIMATION ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}