/*
Theme Name: Bep Nam Duong Clone Precise
Theme URI: https://bepnamduong.com.vn
Author: Antigravity
Description: Precise clone of the Header and Top Section.
Version: 8.0
Text Domain: bepnamduong
*/

/* --- Reset & Global --- */
:root {
    --primary-blue: #0060b0; /* Adjusted to match screenshot */
    --header-height: 60px;
    --bg-body: #f0f4f9; /* Light blueish gray */
    --text-color: #333;
    --pill-blue: #4d8cdb; /* Lighter blue for header buttons */
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 10px; }

/* --- 1. Header --- */
#site-header {
    background-color: var(--primary-blue);
    height: var(--header-height);
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between; height: 100%;
}

/* Logo */
.logo { display:flex; align-items: center; }
.logo span { font-size: 22px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: -0.5px; }
.logo span small { font-size: 10px; font-weight: 400; margin-left: 2px; opacity: 0.8; }

/* Category Button */
.cat-btn {
    display: flex; align-items: center; gap: 8px;
    color: #fff; font-size: 13px; font-weight: 500;
    cursor: pointer; padding: 0 15px; height: 100%;
}
.cat-btn i { font-size: 18px; }

/* Search Bar (Capsule Style) */
.header-search {
    flex: 1; margin: 0 40px; max-width: 450px;
}
.search-form {
    position: relative; width: 100%;
}
.search-input {
    width: 100%; height: 36px;
    border-radius: 18px; border: none;
    padding: 0 15px 0 40px; /* Space for icon left */
    font-size: 13px; color: #333;
    background-color: #f5f5f5;
}
.search-icon-static {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #888; font-size: 14px; pointer-events: none;
}

/* Header Pills */
.header-pills { display: flex; align-items: center; gap: 10px; }
.pill-btn {
    background-color: var(--pill-blue);
    color: #fff; border-radius: 18px;
    height: 34px; padding: 0 15px;
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pill-btn:hover { background-color: #5da0ef; }
.pill-btn i { font-size: 14px; }

.cart-link {
    display: flex; align-items: center; gap: 6px;
    color: #fff; font-size: 13px; font-weight: 500; margin-left: 10px;
}
.cart-link i { font-size: 18px; }


/* --- 2. Hotlinks Bar --- */
.hotlinks-bar {
    background-color: #e6eff7; /* Matches screenshot light blue */
    padding: 8px 0; border-bottom: 1px solid #deeef9;
}
.hotlinks-inner {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;
}
.hot-link {
    font-size: 12px; color: #004d99; font-weight: 500; white-space: nowrap;
}
.hot-link:hover { text-decoration: underline; color: #002b55; }


/* --- 3. Main Banner --- */
.main-banner-section { margin-top: 20px; }
.main-banner-img {
    width: 100%; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(215, 0, 24, 0.2); /* Red glow match */
    display: block;
}

/* --- 4. Category Grid (8x2) --- */
.category-grid-section { margin-top: 20px; margin-bottom: 20px; }
.cat-grid-container {
    background: #fff; border-radius: 12px;
    padding: 20px 10px;
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 Columns */
    gap: 15px 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.cat-item {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; color: #333; transition: 0.2s;
    padding: 5px;
}
.cat-item:hover { color: var(--primary-blue); transform: translateY(-2px); }
.cat-img {
    width: 60px; height: 60px; margin-bottom: 10px;
    object-fit: contain;
}
.cat-name { font-size: 12px; line-height: 1.3; font-weight: 500; }

/* --- 5. Săn Sale Giá Sốc Section --- */
.ss-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 0;
    margin-top: 25px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ss-title {
    font-size: 20px; font-weight: 700; color: #333;
    padding: 15px 15px 5px; margin: 0;
}

/* Tabs Header */
.ss-tabs-wrapper {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 15px; border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
}
.ss-tabs-banners {
    display: flex; gap: 10px;
}
.ss-tab-img {
    height: 35px; border-radius: 4px; cursor: pointer;
    transition: 0.2s; background: #eee; min-width: 100px; object-fit: cover;
}
.ss-tab-img:hover { transform: translateY(-2px); }

.ss-tabs-text {
    display: flex; gap: 15px;
}
.ss-link { font-size: 13px; color: #555; font-weight: 500; white-space: nowrap; cursor: pointer; }
.ss-link:hover { color: var(--primary-blue); }

/* Timer Bar */
.ss-timer-bar {
    background-color: #f2f7fd; 
    padding: 10px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.timer-left {
    background: #66a6ff; color: white;
    padding: 5px 20px; border-radius: 20px;
    font-weight: 500; font-size: 13px;
    display: flex; align-items: center; gap: 5px;
}
.timer-box {
    background: #fff; color: #333; font-weight: bold;
    padding: 0 4px; border-radius: 3px; min-width: 22px; text-align: center;
}
.timer-right {
    font-size: 13px; font-weight: bold; color: #555;
    display: flex; align-items: center; gap: 20px;
}

/* Product Card - Flash Sale Style */
.ss-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    padding: 15px;
}
.ss-card {
    border: 1px solid #eee; border-radius: 8px;
    padding: 10px; position: relative; background: #fff;
    transition: 0.2s;
}
.ss-card:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transform: translateY(-2px); border-color: #ddd; z-index: 2;
}

.ss-badges {
    position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; z-index: 2;
}
.badge-hot, .badge-new {
    font-size: 10px; padding: 2px 6px; border-radius: 2px; color: #fff; font-weight: bold;
}
.badge-hot { background: #ffbc00; color: #da251c; } /* Yellow/Red text */
.badge-new { background: #ffa0a0; color: #da251c; } /* Pinkish/Red text */

.ss-thumb {
    height: 160px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.ss-thumb img { max-height: 100%; max-width: 100%; }

.ss-name {
    font-size: 13px; color: #333; font-weight: 500;
    line-height: 1.4; height: 38px; overflow: hidden;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.ss-price {
    font-size: 16px; color: #da251c; font-weight: 700; display: block;
}
.ss-old-price {
    font-size: 12px; color: #999; text-decoration: line-through;
    margin-left: 5px; font-weight: 400;
}
.ss-discount {
    color: #da251c; font-size: 12px; margin-left: 5px;
}

/* Stock Status Bar */
.ss-stock-bar {
    background: #e5e5e5; border-radius: 10px;
    height: 16px; margin: 8px 0; position: relative;
    overflow: hidden;
}
.ss-stock-progress {
    background: #ffc20e; /* Yellow */
    height: 100%; width: 60%; /* Dynamic width */
    position: absolute; top: 0; left: 0;
}
.ss-stock-text {
    position: absolute; width: 100%; text-align: center;
    font-size: 10px; line-height: 16px; color: #333; font-weight: 600;
    z-index: 2; display: flex; align-items: center; justify-content: center; gap: 3px;
}
.ss-stock-text i { font-size: 10px; color: #d70018; }

/* Buy Button */
.ss-buy-btn {
    display: block; width: 100%;
    background: #ebf6ff; color: #0060b0;
    text-align: center; font-size: 12px; font-weight: 700;
    padding: 8px 0; border-radius: 4px;
    margin-top: 5px;
}
.ss-buy-btn:hover { background: #0060b0; color: #fff; }

/* --- 6. Mua Online Giá Rẻ Quá Section --- */
.mo-container { margin-top: 30px; }
.mo-title { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 15px; }

.mo-box {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mo-banner img { width: 100%; display: block; }

/* Navigation Tabs */
.mo-nav {
    display: flex; align-items: center; 
    border-bottom: 1px solid #eee; padding: 0 20px;
    overflow-x: auto;
}
.mo-nav-item {
    padding: 15px 20px; font-size: 14px; color: #555;
    cursor: pointer; font-weight: 500; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}
.mo-nav-item:hover, .mo-nav-item.active {
    color: #0060b0; border-bottom-color: #0060b0;
}

/* Product Grid */
.mo-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0; /* Border collapse fix style */
}
.mo-card {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 15px; position: relative;
    transition: 0.2s; background: #fff;
    display: flex; flex-direction: column;
}
.mo-card:hover {
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    z-index: 2; border-color: transparent;
    border-radius: 4px;
}

/* Badges */
.mo-badges { display: flex; gap: 5px; margin-bottom: 10px; }
.mo-badge {
    height: 20px; padding: 0 8px; border-radius: 2px;
    font-size: 11px; display: flex; align-items: center; gap: 4px;
    background: #f2f2f2; color: #555;
}
.mo-badge.hot { background: #fff4d6; color: #dfa800; }

/* Image */
.mo-thumb {
    height: 160px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 15px;
}

/* Promo Tag */
.mo-promo-tag {
    background: linear-gradient(90deg, #d70018 0%, #ff3838 100%);
    color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase;
    padding: 3px 8px; border-radius: 20px; display: inline-block;
    margin-bottom: 8px; width: fit-content;
}
.mo-promo-tag i { margin-right: 3px; }

/* Info */
.mo-name {
    font-size: 13px; color: #333; font-weight: 500;
    line-height: 1.4; height: 38px; overflow: hidden;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Tech Specs */
.mo-tech { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.mo-tech span {
    background: #f5f5f5; color: #666; font-size: 11px;
    padding: 2px 6px; border-radius: 2px;
}

/* Price */
.mo-price { font-size: 16px; color: #d70018; font-weight: 700; }
.mo-old-price-row { font-size: 12px; color: #999; margin-top: 2px; }
.mo-old-price { text-decoration: line-through; }
.mo-discount { color: #d70018; margin-left: 5px; }

/* Footer: Stars and Compare */
.mo-card-footer {
    margin-top: auto; padding-top: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.mo-rating { color: #ffbc00; font-size: 12px; }
.mo-rating span { color: #999; font-size: 11px; margin-left: 2px; }
.mo-compare {
    color: #0060b0; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 3px;
}
.mo-compare:hover { text-decoration: underline; }

/* View More Section */
.mo-view-more {
    text-align: center; padding: 20px;
}
.mo-view-btn {
    display: inline-block; padding: 8px 30px;
    border: 1px solid #e0e0e0; border-radius: 4px;
    color: #0060b0; font-weight: 500; font-size: 13px;
    background: #fff;
    transition: 0.2s;
}
.mo-view-btn:hover { border-color: #0060b0; background: #f2f7fd; }

@media (max-width: 1024px) {
    .ss-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid-container { grid-template-columns: repeat(4, 1fr); }
    .header-pills span { display: none; }
    .header-pills i { margin: 0; }
    .pill-btn { padding: 0 10px; }
    .ss-tabs-wrapper { display: block; white-space: nowrap; overflow-x: auto; }
    .mo-grid { grid-template-columns: repeat(3, 1fr); }
    .mo-nav { overflow-x: scroll; }
}

@media (max-width: 768px) {
    .container { padding: 0 15px; }
    .cat-btn, .hotlinks-bar { display: none; }
    .header-search { margin: 0 10px; }
    .cart-link span { display: none; }
    .cat-grid-container { grid-template-columns: repeat(4, 1fr); }
    .mo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pagination */
.woocommerce-pagination {
    margin-top: 30px;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}
.woocommerce-pagination ul {
    display: flex !important;
    list-style: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px;
    background: transparent;
}
.woocommerce-pagination ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-block !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #ddd !important;
    border-radius: 4px;
    background: #fff;
    transition: 0.2s;
    line-height: 1;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background-color: var(--primary-blue) !important;
    color: #fff !important;
    border-color: var(--primary-blue) !important;
}
.woocommerce-pagination ul li a:focus {
    outline: none;
}
/* Archive Grid */
.archive-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991px) {
    .archive-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .archive-products-grid { grid-template-columns: repeat(1, 1fr); }
}

.woocommerce-pagination .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}