/* ===== RESPONSIVE - media.css ===== */

/* ---- Tablet / nhỏ hơn desktop ---- */
@media (max-width: 1025px) {
	#hamburger { display: block; }
	.menu-head { display: none; }
	.header { padding: 10px 0; }
	.flex-product-main { display: block; }
	.flex-product-main .left-product {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		transform: translateX(-250px);
		bottom: 0;
		overflow-x: hidden;
		background: #fff;
		box-shadow: 0 0 5px #000;
		transition: all 0.5s;
	}
	.flex-product-main .left-product.show { transform: translateX(0); }
	.flex-product-main .right-product { width: 100%; }
	.grid-product { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.filter { display: block; }
	.menu-mobile-btn {
		display: flex;
		width: 35px;
		height: 35px;
		position: relative;
		flex-wrap: wrap;
		cursor: pointer;
		left: 0;
	}
	.menu-mobile-btn span {
		display: inline-block;
		width: 100%;
		height: 3px;
		background: #000;
		margin: 4px 0;
	}
	.wrap-menu { width: calc(100% - 60px); }
	.menu ul { display: none !important; }
}

/* ---- Tablet nhỏ ---- */
@media (max-width: 850px) {
	.news-left { width: 100%; }
	.news-right { width: 100%; margin-top: 24px; position: static; min-width: 0; }
	.flex-news-detail { flex-direction: column; }
}

/* ---- Mobile landscape / tablet dọc ---- */
@media (max-width: 769px) {
	.gutter-x-20 { --bs-gutter-x: 10px; }

	/* About old */
	.flex-about { flex-wrap: wrap; }
	.content-about { width: 100%; }
	.photo-about { margin-top: 20px; width: 100%; text-align: center; }
	.flex-video { flex-wrap: wrap; }
	.wr-video { width: 100%; }
	.wr-form { width: 100%; margin-top: 20px; }

	/* News list */
	.item-news { padding: 5px; }
	.ds-news h3 { font-size: 14px; }
	.grid-product, .grid-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

	/* Cart */
	.text-cart { display: none; }

	/* Product detail */
	.grid-pro-detail { display: block; }
	.grid-pro-detail .left-pro-detail { width: 100%; padding: 0; border-right: none; }
	.slick_photo1 { text-align: center; }
	.grid-pro-detail .right-pro-detail { width: 100%; }

	/* Footer */
	.info-footer .flex-footer { display: block; }
	.box-footer { width: 100% !important; margin-top: 20px; }

	/* Hero inner page */
	.page-hero { min-height: 150px; }
}

/* ---- Mobile portrait ---- */
@media (max-width: 575px) {
	.grid-product { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.grid-news { grid-template-columns: 1fr; }
	.wrap-content { padding: 0 14px; }

	/* Footer mobile */
	.footer-logo-row { max-width: 100%; }
	.box-footer-2, .box-footer-3 { max-width: 100%; }
}

/* ---- Small mobile ---- */
@media (max-width: 440px) {
	.grid-product { grid-template-columns: 1fr; }
	.wrap-content { padding: 0 12px; }
}

/* ---- Very small ---- */
@media (max-width: 369px) {
	body { font-size: 13px; }
}

/* ===== HOMEPAGE RESPONSIVE ===== */
@media (max-width: 769px) {
	/* About: heading first, image second, desc+features third */
	.about-header-row-new { order: 1; }
	.about-image-new { order: 2; }
	.about-content-new { order: 3; }

	/* Dichvu: 1 cột trên mobile */
	.dichvu-grid-new { grid-template-columns: 1fr; }

	/* Tintuc grid (≤3 items): 2 columns */
	.tintuc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

	/* Sanpham: 3-col on tablet/mobile */
	.sanpham-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }

	/* Duan: 2-col on mobile */
	.duan-grid-new { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

	/* Phanhoi cards → swiper (fix width when inside slide) */
	.swiper .phanhoi-card { width: 100% !important; max-width: 100% !important; min-height: auto; }

	/* Ẩn phân trang trang dịch vụ */
	.news-com-dich-vu-tien-ich .pagination { display: none !important; }
}

@media (max-width: 575px) {
	.sanpham-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.duan-grid-new { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 450px) {
	.sanpham-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
	.duan-grid-new { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
	.tintuc-grid { grid-template-columns: 1fr !important; }
}

/* ===== SLIDE VISIBLE IN RESPONSIVE ===== */
@media (max-width: 1025px) {
    .navigation {
        position: relative !important;
        top: auto !important;
    }
    .above-nav {
        position: relative;
    }
    .slideshow {
        position: relative;
        z-index: 1;
    }
    .navigation.is-index {
        position: relative !important;
    }
    /* Khôi phục nền vàng cho nav trên homepage responsive */
    .hero-wrap .navigation {
        background: #26231f !important;
    }
    .hero-wrap .navigation .nav-bar {
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        min-height: 80px !important;
        padding: 0 !important;
    }
    .hero-wrap .logos-nav {
        justify-self: center !important;
    }

    /* Căn giữa logo trong nav bar responsive */
    .nav-bar {
        justify-content: center;
    }
    .logos-nav {
        position: relative;
        z-index: 2;
    }
    .mobile-menu-btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
    .nav-links {
        display: none;
    }
}

/* ===== NAV SHORTCUTS HIDE ON MOBILE ===== */
@media (max-width: 1025px) {
    .nav-shortcuts { display: none; }
}