/* ==========================================================================
   BrickCo - home.css (chỉ nạp ở trang chủ)
   ========================================================================== */

/* ===== Hero ===== */
.hero-section { position:relative; padding:0.75rem 0.5rem 0; }
.hero-carousel { position:relative; border-radius:var(--radius-lg); overflow:hidden; height:9rem; touch-action:pan-y; }
.hero-slide { position:absolute; inset:0; transform:translateX(100%); transition:transform .5s ease-out; display:flex; }
.hero-slide.active { transform:translateX(0); }
.hero-slide.prev { transform:translateX(-100%); }
.hero-slide-bg { width:100%; height:100%; display:flex; align-items:center; padding:0 1.5rem; position:relative; background:linear-gradient(to right,var(--orange-500),var(--orange-600)); }
.hero-slide-bg img { position:absolute; right:0; top:0; height:100%; width:50%; object-fit:cover; opacity:.6; }
.hero-slide-content { position:relative; z-index:2; }
.hero-slide-content h2 { color:var(--white); font-weight:800; font-size:1.25rem; margin-bottom:0.25rem; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.hero-slide-content p { color:rgba(255,255,255,.9); font-size:0.75rem; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.hero-btn { display:inline-block; margin-top:0.75rem; background:var(--white); color:var(--orange-600); font-weight:700; font-size:0.75rem; padding:0.375rem 1rem; border-radius:9999px; box-shadow:var(--shadow-lg); transition:background .15s; }
.hero-btn:hover { background:var(--orange-50); color:var(--orange-600); }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(255,255,255,.3); color:var(--white); border-radius:9999px; padding:0.25rem; display:flex; align-items:center; justify-content:center; transition:background .15s; backdrop-filter:blur(4px); }
.hero-arrow:hover { background:rgba(255,255,255,.5); }
.hero-arrow-left { left:0.25rem; }
.hero-arrow-right { right:0.25rem; }
.hero-dots { position:absolute; bottom:0.5rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:0.375rem; }
.hero-dot { height:0.375rem; width:0.375rem; border-radius:9999px; background:rgba(255,255,255,.5); transition:all .2s; border:none; padding:0; }
.hero-dot.active { width:1.25rem; background:var(--white); }

@media (prefers-reduced-motion:reduce) {
	.hero-slide { transition:none; }
}

/* ===== Section dùng chung ===== */
.section-title { font-size:1rem; font-weight:700; color:var(--gray-900); }
.view-all-btn { display:flex; align-items:center; gap:0.25rem; font-size:0.875rem; font-weight:500; color:var(--orange-500); transition:color .15s; white-space:nowrap; }
.view-all-btn:hover { color:var(--orange-600); }
.view-all-btn .arrow { font-size:1.125rem; line-height:1; }

/* ===== Category Bar ===== */
.category-bar-section { padding:0.75rem 0.5rem; background:var(--gray-100); }
.category-bar-card { background:var(--white); border-radius:var(--radius-2xl); padding:1rem 0.75rem; box-shadow:var(--shadow-sm); }
.category-bar-header { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.75rem; }
.category-scroll { display:flex; align-items:flex-start; gap:0.75rem; overflow-x:auto; padding-bottom:0.25rem; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; }
.category-scroll::-webkit-scrollbar { display:none; }
.category-item { display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; width:4.75rem; flex-shrink:0; scroll-snap-align:start; }
.category-item-img-wrap { position:relative; display:block; width:100%; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--gray-100); background:var(--gray-50); transition:transform .2s, box-shadow .2s; }
.category-item:hover .category-item-img-wrap { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.category-item-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.category-item:hover .category-item-img-wrap img { transform:scale(1.05); }
.category-item-overlay { position:absolute; inset:0; background:rgba(255,255,255,.1); }
.category-item-icon { position:absolute; bottom:0.25rem; right:0.25rem; height:1.5rem; width:1.5rem; display:flex; align-items:center; justify-content:center; border-radius:9999px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-sm); }
.category-item-icon svg { width:0.8125rem; height:0.8125rem; color:var(--gray-600); }
.category-item-label { font-size:0.6875rem; font-weight:500; color:var(--gray-700); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.category-item:hover .category-item-label { color:var(--orange-600); }

/* ===== Flash Sale ===== */
.flash-sale-section { padding:1rem 0.5rem 0; }
.flash-sale-card { border-radius:var(--radius-lg); background:linear-gradient(to right,var(--orange-50),#fef2f2); border:1px solid var(--orange-100); overflow:hidden; }
.flash-sale-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.75rem 1rem; }
.flash-sale-left { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.flash-sale-title-wrap { display:flex; align-items:center; gap:0.375rem; }
.flash-sale-title { font-weight:800; font-size:1.125rem; color:var(--orange-600); text-transform:uppercase; letter-spacing:.025em; white-space:nowrap; }
.flash-timer-wrap { display:flex; align-items:center; gap:0.25rem; margin-left:0.5rem; }
.flash-timer-label { font-size:0.75rem; color:var(--gray-500); display:none; }
.flash-timer { display:flex; gap:0.125rem; align-items:center; font-variant-numeric:tabular-nums; }
.timer-box { background:var(--gray-900); color:var(--white); font-size:0.75rem; font-weight:700; padding:0.125rem 0.375rem; border-radius:0.25rem; }
.timer-sep { color:var(--gray-700); font-weight:700; font-size:0.75rem; }
.flash-sale-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; padding:0 0.5rem 0.75rem; }

/* ===== Hộp trắng dùng chung (kệ sản phẩm, lưới sản phẩm...) ===== */
.home-box { margin:1rem 0.5rem 0; padding:0.75rem; background:var(--white); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); }
.home-box-header { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.75rem; }
.home-box-title { font-size:1rem; font-weight:700; color:var(--gray-800); }
.home-box-more { flex-shrink:0; font-size:0.875rem; font-weight:500; color:var(--orange-500); transition:color .15s; }
.home-box-more:hover { color:var(--orange-600); }

/* ===== Banner ảnh ===== */
.home-banner { margin:1rem 0.5rem 0; overflow:hidden; background:var(--white); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); }
.home-banner-inner { display:block; }
.home-banner-img { width:100%; height:9rem; object-fit:cover; }

/* ===== Kệ sản phẩm trượt ngang ===== */
.product-shelf-scroll { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.25rem; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; }
.product-shelf-scroll::-webkit-scrollbar { display:none; }
/* Điện thoại: 3 thẻ + 1/4 thẻ thứ 4 (3 khoảng gap 0.5rem = 1.5rem) */
.product-shelf-item { width:calc((100% - 1.5rem) / 3.25); flex-shrink:0; scroll-snap-align:start; }

/* ===== Lưới sản phẩm: 3 cột (mobile) / 4 cột (tablet) / 5 cột (máy tính) ===== */
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; }

/* ===== Responsive: sm (640px+) ===== */
@media (min-width:640px) {
	.hero-section { padding:0.75rem 1rem 0; }
	.hero-carousel { height:14rem; }
	.hero-slide-bg { padding:0 3rem; }
	.hero-slide-bg img { width:60%; }
	.hero-slide-content h2 { font-size:1.875rem; margin-bottom:0.5rem; }
	.hero-slide-content p { font-size:1.125rem; }
	.hero-btn { font-size:1rem; padding:0.625rem 1.5rem; margin-top:1.25rem; }
	.hero-arrow { padding:0.375rem; }
	.hero-arrow-left { left:0.75rem; }
	.hero-arrow-right { right:0.75rem; }
	.section-title { font-size:1.125rem; }
	.view-all-btn { font-size:1rem; }
	.category-bar-section { padding:0.75rem 1rem; }
	.category-bar-card { padding:1rem 1.25rem; }
	.category-scroll { gap:1.25rem; }
	.category-item { width:6rem; }
	.category-item-label { font-size:0.75rem; }
	.flash-sale-section { padding:1rem 1rem 0; }
	.flash-sale-title { font-size:1.25rem; }
	.flash-timer-label { display:inline; }
	.flash-sale-grid { grid-template-columns:repeat(4,1fr); gap:0.75rem; }
	.home-box { margin:1rem 1rem 0; padding:1rem; }
	.home-box-title { font-size:1.125rem; }
	.home-banner { margin:1rem 1rem 0; }
	.home-banner-img { height:14rem; }
	.product-grid { gap:0.75rem; }
	.product-shelf-scroll { gap:0.75rem; }
	.product-shelf-item { width:11rem; }
}

/* ===== Responsive: md (768px+) ===== */
@media (min-width:768px) {
	.hero-carousel { height:18rem; }
	.flash-sale-grid { grid-template-columns:repeat(6,1fr); }
	.product-shelf-item { width:12rem; }
	.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ===== Responsive: lg (1024px+) ===== */
@media (min-width:1024px) {
	.hero-carousel { height:20rem; }
	/* Máy tính: 6 thẻ vừa khung (5 khoảng gap 0.75rem = 3.75rem) */
	.product-shelf-item { width:calc((100% - 3.75rem) / 6); }
	.product-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}