<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion Store - Sync Layout</title>
    <style>
        /* CSS CHUNG */
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        /* Container chuẩn cho cả 2 phần - Rộng 1400px và căn giữa */
        .section-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
            box-sizing: border-box;
        }

        /* --- PHẦN 1: FASHION GRID --- */
        .wp-fashion-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr; 
            grid-template-rows: 400px 400px; 
            gap: 15px;
            width: 100%;
            margin-bottom: 60px; /* Khoảng cách giữa 2 phần */
        }

        .grid-card {
            position: relative;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center; 
            padding: 40px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            transition: transform 0.5s ease;
        }

        .grid-card:hover { transform: translateY(-5px); }

        .card-large { 
            grid-row: 1 / span 2; 
            background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)), url('https://i.pinimg.com/1200x/c6/7a/ec/c67aece913aebd6a9886cc65c81560c6.jpg'); 
        }
        .card-top-right { 
            background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)), url('https://i.pinimg.com/1200x/1d/9d/08/1d9d086a7db00030229d9063ae727a62.jpg'); 
        }
        .card-bottom-right { 
            background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)), url('https://i.pinimg.com/1200x/2d/08/75/2d0875babde7d8043be299c66df960ea.jpg'); 
        }

        .card-content { z-index: 2; max-width: 80%; }
        .card-content h2 { 
            font-size: clamp(24px, 4vw, 36px); 
            font-weight: 600; 
            margin: 0 0 20px 0; 
            color: #ffffff !important; 
        }

        .shop-link-btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 28px;
            background: rgba(0, 0, 0, 0.4);
            color: #fff !important;
            text-decoration: none;
            font-size: 14px;
            border: 1px solid rgba(255,255,255,0.4);
            backdrop-filter: blur(8px);
            transition: all 0.3s ease;
        }
        .shop-link-btn:hover { background: #fff; color: #000 !important; }

        /* --- PHẦN 2: SHOP BY CATEGORIES --- */
        .category-header {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .category-grid {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            width: 100%;
        }

        .category-item {
            flex: 1 1 calc(33.333% - 20px); 
            min-width: 250px; 
        }

        .image-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1; 
            overflow: hidden;
            background-color: #f5f5f5;
        }

        .image-wrapper img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.5s ease;
        }

        .image-wrapper:hover img { transform: scale(1.05); }

        .btn-click {
            position: absolute; bottom: 15px; right: 15px;
            background: white; color: black;
            padding: 10px 20px; text-decoration: none;
            font-size: 13px; font-weight: bold;
            border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .btn-click:hover { background: #000; color: #fff; }

        .category-info { margin-top: 15px; }
        .category-name { display: block; font-weight: bold; font-size: 18px; margin-bottom: 4px; }
        .item-count { color: #777; font-size: 14px; }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .wp-fashion-grid {
                grid-template-columns: 1fr;
                grid-template-rows: 450px 350px 350px;
            }
            .card-large { grid-row: auto; }
            .category-item { flex: 1 1 calc(50% - 20px); }
        }
        @media (max-width: 480px) {
            .category-item { flex: 1 1 100%; }
        }
    </style>
</head>
<body>

    <div class="section-container">
        <div class="wp-fashion-grid">
            <a href="https://blueaba.com/shop?category=new" class="grid-card card-large">
                <div class="card-content">
                    <h2>Essential Tees</h2>
                    <div class="shop-link-btn">Shop Collection ↗</div>
                </div>
            </a>

            <a href="https://blueaba.com/shop?category=new" class="grid-card card-top-right">
                <div class="card-content">
                    <h2>Core Hoodies</h2>
                    <div class="shop-link-btn">Shop Collection ↗</div>
                </div>
            </a>

            <a href="https://blueaba.com/shop?category=new" class="grid-card card-bottom-right">
                <div class="card-content">
                    <h2>Urban Sweatshirts</h2>
                    <div class="shop-link-btn">Shop Collection ↗</div>
                </div>
            </a>
        </div>

        <h2 class="category-header">Shop by Categories</h2>
        <div class="category-grid">
            <div class="category-item">
                <div class="image-wrapper">
                    <img src="https://i.pinimg.com/1200x/66/a6/64/66a66497195e3fc294c3b9513861f25b.jpg" alt="Hoodies">
                    <a href="https://blueaba.com/shop?category=new" class="btn-click">Click here</a>
                </div>
                <div class="category-info">
                    <span class="category-name">Hoodies</span>
                    <span class="item-count">331 items</span>
                </div>
            </div>

            <div class="category-item">
                <div class="image-wrapper">
                    <img src="https://i.pinimg.com/1200x/79/ea/78/79ea786b16708c2252ac53aea69c45b9.jpg" alt="Sweatshirts">
                    <a href="https://blueaba.com/shop?category=new" class="btn-click">Click here</a>
                </div>
                <div class="category-info">
                    <span class="category-name">Sweatshirts</span>
                    <span class="item-count">93 items</span>
                </div>
            </div>

            <div class="category-item">
                <div class="image-wrapper">
                    <img src="https://i.pinimg.com/1200x/e7/75/16/e77516bfc349a7b51e5d286b246885b3.jpg" alt="T-Shirts">
                    <a href="https://blueaba.com/shop?category=new" class="btn-click">Click here</a>
                </div>
                <div class="category-info">
                    <span class="category-name">T-Shirts</span>
                    <span class="item-count">23 items</span>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Optional subtitle text

Highlight live products from the current store with a clean responsive grid.

Featured products

Inspire and let yourself be inspired, from one unique fashion to another.

BLUEABA.COM is an online store with secure checkout, tracked shipping, clear returns, and responsive customer support.

Essential Tees

Core Hoodies

Urban Sweatshirts

Shop by Categories

New Collection

Featured products

Featured products

Shop Gram