/*
 Theme Name: PrintedGift Theme
 Theme URI: https://yourwebsite.com/printedgift
 Author: Your Name
 Author URI: https://yourwebsite.com
 Description: A custom WordPress theme for print-on-demand gift store
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: printedgift
 Tags: e-commerce, one-column, custom-menu, featured-images, theme-options
 */
 
 /* Reset and Base Styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 :root {
     --primary: #f05a3e;
     --primary-hover: #d94d32;
     --dark: #2d2d2d;
     --light: #f8f8f8;
     --white: #ffffff;
     --gray: #666666;
     --light-gray: #e5e5e5;
 }
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: var(--dark);
     background-color: var(--light);
 }
 
 a {
     text-decoration: none;
     color: inherit;
     transition: color 0.3s ease;
 }
 
 a:hover {
     color: var(--primary);
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Top Bar */
 .top-bar {
     background-color: var(--white);
     padding: 8px 0;
     font-size: 12px;
     border-bottom: 1px solid var(--light-gray);
 }
 
 .top-bar .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .top-bar-links a {
     margin-left: 20px;
     color: var(--gray);
 }
 
 /* Header */
 .site-header {
     background-color: var(--white);
     padding: 15px 0;
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 
 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .site-logo {
     font-size: 28px;
     font-weight: 700;
 }
 
 .site-logo span {
     color: var(--primary);
 }
 
 .header-icons {
     display: flex;
     gap: 20px;
     align-items: center;
 }
 
 .header-icons a {
     font-size: 20px;
 }
 
 .cart-count {
     background-color: var(--primary);
     color: var(--white);
     font-size: 10px;
     padding: 2px 6px;
     border-radius: 50%;
     position: relative;
     top: -8px;
     left: -5px;
 }
 
 /* Navigation */
 .main-navigation {
     background-color: var(--white);
     border-bottom: 1px solid var(--light-gray);
 }
 
 .main-navigation ul {
     display: flex;
     justify-content: center;
     list-style: none;
     gap: 30px;
     padding: 15px 0;
 }
 
 .main-navigation a {
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .main-navigation a:hover,
 .main-navigation .current-menu-item a {
     color: var(--primary);
 }
 
 /* Hero Section */
 .hero-section {
     background-color: var(--light);
     padding: 60px 0;
 }
 
 .hero-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: center;
 }
 
 .hero-text h1 {
     font-size: 48px;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 30px;
 }
 
 .hero-text h1 span {
     color: var(--primary);
 }
 
 .btn-primary {
     display: inline-block;
     background-color: var(--primary);
     color: var(--white);
     padding: 15px 30px;
     border-radius: 5px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: background-color 0.3s ease;
 }
 
 .btn-primary:hover {
     background-color: var(--primary-hover);
     color: var(--white);
 }
 
 .hero-steps {
     display: flex;
     gap: 30px;
     margin-top: 40px;
 }
 
 .step {
     text-align: center;
 }
 
 .step-icon {
     width: 50px;
     height: 50px;
     border: 2px solid var(--dark);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 10px;
     font-size: 20px;
 }
 
 .step p {
     font-size: 12px;
     text-transform: uppercase;
     font-weight: 500;
 }
 
 .hero-image img {
     width: 100%;
     border-radius: 10px;
 }
 
 /* Featured Collections */
 .featured-collections {
     padding: 80px 0;
     background-color: var(--white);
 }
 
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 40px;
 }
 
 .section-title {
     font-size: 24px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
 .collections-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
 }
 
 .collection-card {
     text-align: center;
 }
 
 .collection-card img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
     border-radius: 10px;
     margin-bottom: 15px;
 }
 
 .collection-card h3 {
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 /* Why Choose Us */
 .why-choose-us {
     padding: 80px 0;
     background-color: var(--light);
 }
 
 .features-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 .feature-card {
     text-align: center;
     padding: 30px;
 }
 
 .feature-icon {
     width: 70px;
     height: 70px;
     border: 2px solid var(--dark);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 28px;
 }
 
 .feature-card h3 {
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 10px;
 }
 
 .feature-card p {
     font-size: 14px;
     color: var(--gray);
 }
 
 /* Footer */
 .site-footer {
     background-color: var(--dark);
     color: var(--white);
     padding: 60px 0 30px;
 }
 
 .footer-content {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 40px;
     margin-bottom: 40px;
 }
 
 .footer-logo {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
 }
 
 .footer-logo span {
     color: var(--primary);
 }
 
 .footer-description {
     font-size: 14px;
     color: #999;
     margin-bottom: 20px;
 }
 
 .footer-section h4 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 20px;
     text-transform: uppercase;
 }
 
 .footer-section ul {
     list-style: none;
 }
 
 .footer-section li {
     margin-bottom: 10px;
 }
 
 .footer-section a {
     font-size: 14px;
     color: #999;
 }
 
 .footer-section a:hover {
     color: var(--primary);
 }
 
 .social-links {
     display: flex;
     gap: 15px;
 }
 
 .social-links a {
     width: 40px;
     height: 40px;
     border: 1px solid #666;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .footer-bottom {
     border-top: 1px solid #444;
     padding-top: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .copyright {
     font-size: 14px;
     color: #999;
 }
 
 .payment-methods img {
     height: 25px;
     margin-left: 10px;
 }
 
 /* Responsive */
 @media (max-width: 992px) {
     .hero-content {
         grid-template-columns: 1fr;
     }
     
     .collections-grid,
     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     
     .footer-content {
         grid-template-columns: 1fr 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .hero-text h1 {
         font-size: 32px;
     }
     
     .hero-steps {
         flex-direction: column;
         gap: 20px;
     }
     
     .collections-grid,
     .features-grid {
         grid-template-columns: 1fr;
     }
     
     .main-navigation ul {
         flex-wrap: wrap;
         gap: 15px;
     }
     
     .footer-content {
         grid-template-columns: 1fr;
     }
 }
/* --- SỬA LỖI VỊ TRÍ HEADER VÀ KHOẢNG CÁCH --- */

/* 1. Thiết lập khung chứa: Đẩy icon sang phải */
.header-content {
    position: relative;       /* Làm mốc để căn chỉnh logo */
    display: flex;
    justify-content: flex-end; /* QUAN TRỌNG: Lệnh này đẩy toàn bộ icon sang TAY PHẢI */
    align-items: center;      /* Căn giữa các icon theo chiều dọc */
    padding: 5px 0 10px 0;    /* Giảm padding để thu hẹp khoảng cách */
    min-height: 60px;         /* Đảm bảo chiều cao tối thiểu để không bị chồng lấn */
}

/* 2. Căn Logo ra GIỮA màn hình (Tuyệt đối) */
.site-logo {
    position: absolute;       /* Tách logo khỏi dòng chảy văn bản để đứng im ở giữa */
    left: 50%;                /* Đẩy ra giữa */
    transform: translateX(-50%); /* Căn chỉnh chính xác tâm giữa */
    top: 50%;                 /* Đưa xuống giữa theo chiều dọc */
    margin-top: -15px;        /* Tinh chỉnh nhỏ để logo cân đối hơn với icon */
    z-index: 10;
}

/* Kích thước logo */
.site-logo img {
    max-width: 180px !important;
    height: auto;
    display: block;
}

/* 3. Cụm 3 biểu tượng (Search, Acc, Cart) */
.header-icons {
    display: flex;
    gap: 25px;                /* Khoảng cách giữa các icon */
    align-items: center;
    position: relative;
    z-index: 20;              /* Đảm bảo icon nổi lên trên để bấm được */
}

/* 4. THU HẸP KHOẢNG CÁCH MENU (Vấn đề số 2) */
.site-header {
    padding-bottom: 3px !important; /* Xóa khoảng trống dưới đáy header */
    border-bottom: none;      /* Xóa đường kẻ nếu thấy rối (tùy chọn) */
}

.main-navigation {
    margin-top: 0px !important; /* Kéo menu sát lên trên */
}

.main-navigation ul {
    padding-top: 10px !important; /* Giảm khoảng đệm trên của menu */
}

/* --- XỬ LÝ TRÊN ĐIỆN THOẠI (Mobile) --- */
/* Để tránh bị vỡ giao diện trên điện thoại, ta trả về mặc định */
@media (max-width: 768px) {
    .header-content {
        justify-content: space-between; /* Trên đt thì logo giữa, icon dãn ra */
    }
    .site-logo {
        position: static; /* Trả lại vị trí bình thường trên mobile */
        transform: none;
        margin: 0;
    }
    .site-logo img {
        max-width: 140px !important;
    }
    .header-icons {
        gap: 15px;
    }
}
/* Làm đẹp danh sách sản phẩm WooCommerce */
.featured-products-wrapper .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* 4 cột */
    gap: 20px;
    list-style: none;
    padding: 0;
}

.featured-products-wrapper .product {
    background: #fff;
    padding: 15px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.featured-products-wrapper .product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.featured-products-wrapper .product img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.featured-products-wrapper .woocommerce-loop-product__title {
    font-size: 16px;
    margin: 10px 0;
    color: #333;
}

.featured-products-wrapper .price {
    display: block;
    font-weight: bold;
    color: #f05a3e; /* Màu cam giống theme của bạn */
    margin-bottom: 15px;
}

.featured-products-wrapper .button {
    background: #2d2d2d;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}

.featured-products-wrapper .button:hover {
    background: #f05a3e;
}

/* Responsive cho điện thoại */
@media (max-width: 768px) {
    .featured-products-wrapper .products {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên điện thoại */
    }
}