/* styles/style.css - Đã sửa lỗi bố cục chung và Banner */

/* Reset cơ bản và font */
* { box-sizing: border-box; } /* Quan trọng: Đảm bảo padding và border không làm tràn kích thước */
body { 
    font-family: 'Roboto', sans-serif; 
    margin:0; 
    padding:0; 
    background:#f0f4f8; 
    color:#023e8a; 
}

/* --- HEADER VÀ BANNER (LỚP 1) --- */
.main-header {
    background: #ffffff; 
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative; /* Quan trọng: Để banner-overlay-logo định vị tương đối */
}

/* Banner Ảnh (Nền) */
#banner-img { 
    object-fit: cover; 
    width: 100%; 
    display: block; 
    height: 150; 
    margin-bottom: 0; 
}

/* --- LOGO VÀ SLOGAN NỔI (LỚP 2) --- */
.banner-overlay-logo {
    position: absolute;
    top: 20px; 
    right: 20px; 
    z-index: 10; 
    text-align: right; 
    color: #ffffff; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}

.logo-on-banner img {
    height: 60px; /* ĐIỀU CHỈNH: Giảm từ 80px xuống 60px */
    width: auto;
    display: block;
    margin-left: auto; 
    margin-bottom: 5px;
}

.slogan-on-banner {
    font-size: 1rem; /* ĐIỀU CHỈNH: Giảm từ 1.1rem xuống 1rem */
    font-weight: 500;
    margin: 0;
}


/* --- NAVIGATION (LỚP 3) --- */
nav { 
    display:flex; 
    justify-content:center; 
    background:#0077b6; /* Màu nền cho thanh Nav */
    padding:15px 0; 
    margin: 0;
}
nav a { margin:0 15px; text-decoration:none; color:#ffffff; font-weight:650; font-size:18px; transition:0.5s; }
nav a:hover { color:#90e0ef; }


/* --- HERO SECTION (ĐÃ THU GỌN) --- */
.hero { 
    position:relative; 
    text-align:center; 
    color:white; 
    background:#0096c7; 
    padding:40px 20px; /* ĐIỀU CHỈNH: Giảm từ 80px xuống 40px */
    border-bottom:5px solid #023e8a; 
    overflow:hidden; 
    margin-top: 0; 
}
.hero::before { content: ''; position:absolute; top:0; left:0; width:100%; height:100%; background: url('https://drhienqt.github.io/assets/img/hinnen1.png') no-repeat center center/cover; opacity:0.3; z-index:0; }
.hero h1, .hero p { position:relative; z-index:1; }
.hero h1 { 
    font-size: 2rem; /* ĐIỀU CHỈNH: Giảm từ 2.5rem xuống 2rem */
    font-weight:800; 
    margin-bottom:15px; 
}
.hero p { 
    font-size: 1rem; /* ĐIỀU CHỈNH: Giảm từ 1.2rem xuống 1rem */
    color:#caf0f8; 
}

/* --- PHẦN DANH MỤC NỔI BẬT (Giữ nguyên) --- */
.categories { 
    padding: 30px 10px; 
    background: #caf0f8; 
    text-align: center; 
}
.categories h2 { 
    font-size: 2rem; 
    margin-bottom: 25px; 
    color: #023e8a; 
}
.category-tabs { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    max-width: 1100px; 
    margin: 0 auto;
}
.category { 
    text-align: center; 
    text-decoration: none; 
    color: #023e8a; 
    background: #ffffff; 
    border-radius: 10px; 
    padding: 10px 5px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: 0.3s;
    width: calc(50% - 15px); 
    max-width: 150px; 
    height: 140px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.category:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 6px 15px rgba(0,0,0,0.2); 
}
.category img { 
    width: 60px; 
    height: 60px;
    object-fit: contain; 
    margin: 0 auto 5px; 
    display: block; 
}
.category p { 
    font-weight: 600; 
    margin: 5px 0 0; 
    font-size: 0.85rem; 
    line-height: 1.2;
}

/* --- PHẦN SẢN PHẨM TIÊU BIỂU (Giữ nguyên) --- */
.products-section-wrapper {
    padding: 40px 20px; 
    background: #e0fbfc; 
    text-align: center; 
}
#featured-products h2 { 
    width: 100%; 
    font-size: 2rem; 
    text-align: center; 
    margin: 0 0 30px;
    color: #023e8a; 
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px;
    justify-content: center;
    max-width: 1300px; 
    margin: 0 auto;
    text-align: left;
}
.product { 
    background: #ffffff; 
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    padding: 15px; 
    text-align: center; 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%; 
    min-width: 150px; 
}
.product:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
.product h3 { font-size: 1rem; color: #023e8a; font-weight: 600; margin: 10px 0 5px; }
.product a { display:inline-block; margin-top:auto; padding:8px 12px; background:#0077b6; color:#fff; text-decoration:none; border-radius:6px; transition:background 0.3s ease; }
.product a:hover { background:#023e8a; }

/* --- CSS VIỀN ẢNH ĐỘNG --- */
.product-image-wrapper {
    position: relative;
    width: 140px; 
    height: 140px;
    margin: 0 auto 10px;
    border-radius: 15px;
    padding: 4px; 
    overflow: hidden; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    background: linear-gradient(135deg, #0096c7, #023e8a);
}
.product-image-wrapper::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 19px; 
    background: linear-gradient(90deg, #ffbe0b, #fb5607, #ff006e, #8338ec, #3a86ff, #ffbe0b);
    background-size: 400% 400%;
    z-index: 0;
    pointer-events: none;
    animation: gradient-border 5s ease infinite;
}
.product img {
    width: 100%; height: 100%;
    object-fit: cover; 
    position: relative; z-index: 1; 
    border-radius: 12px; 
    transition: transform 0.5s ease;
    filter: brightness(1);
}
@keyframes gradient-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- TRANG SANPHAM.HTML (Giữ nguyên) --- */
.category-product-section {
    margin-bottom: 50px;
    padding: 20px 0;
}
.category-product-section .category-title {
    font-size: 1.8rem;
    color: #0077b6;
    text-align: center;
    margin: 0 auto 25px; 
    border-bottom: 3px solid #0096c7;
    display: table; 
    padding-bottom: 5px;
    font-weight: 700;
}
.separator {
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background-color: #ccc;
    margin: 40px auto;
}

/* Modal và Social Buttons (Giữ nguyên) */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:1000; }
.modal-content { background:#ffffff; padding:20px; width:90%; max-width:600px; border-radius:15px; overflow-y:auto; max-height:90%; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.modal-search input { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; margin-bottom:15px; }
.picker-list { max-height: 400px; overflow-y: auto; }
.picker-card { display:flex; gap:10px; border-bottom:1px solid #ddd; padding:10px; align-items:center; transition:0.3s; }
.picker-card:hover { background:#f0f4f8; }
.picker-card img { width:80px; height:80px; object-fit:cover; border-radius:10px; }
.social-buttons { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:2000; }
.social-buttons a img { width:45px; height:45px; transition:0.3s; }
.social-buttons a img:hover { transform:scale(1.1); }


/* Responsive (Đảm bảo mọi thứ hoạt động trên mobile) */
@media(max-width:992px) {
    .product-grid { 
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    }
}
@media(max-width:768px) {
    /* Điều chỉnh vị trí logo trên banner cho màn hình nhỏ */
    .banner-overlay-logo {
        top: 10px;
        right: 10px;
    }
    .logo-on-banner img {
        height: 50px; /* Giảm thêm trên mobile */
    }
    .slogan-on-banner {
        font-size: 0.8rem; /* Giảm thêm trên mobile */
    }
    .hero {
        padding: 30px 20px; /* Giảm thêm Hero Section trên mobile */
    }
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .product-grid { 
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    }
}
@media(max-width:480px) {
    .product-grid { 
        grid-template-columns: 1fr; 
    }
    nav { flex-direction:column; }
    nav a { margin:5px 0; }
}

footer { background:#023e8a; color:white; text-align:center; padding:20px; margin-top:40px; }

/* --- CSS CHO KHỐI INTRO TEXT MỚI --- */
.intro-text {
    background: #ffffff;
    padding: 30px 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.intro-text h3 {
    font-size: 1.5rem;
    color: #0077b6;
    margin-bottom: 15px;
}

.intro-text p {
    font-size: 1rem;
    color: #333;
    max-width: 800px;
    margin: 0 auto 10px;
    line-height: 1.6;
}