/* Import fonts from Google Fonts when online. If your environment is offline
   or you prefer local hosting, remove this import and self-host fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Montserrat:wght@600;700;800&display=swap');

/* Font rendering & fallbacks */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root {
    /* keep existing CSS variables but provide robust fallback stacks for use elsewhere */
    --font-heading: 'Montserrat', "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: 'Inter', "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", system-ui, -apple-system, sans-serif;
}

/* Apply body font and enforce it on admin pages (fixes cases where admin.css
   or other stylesheets override the site font unexpectedly). The !important
   is used sparingly here to recover from broken pages; remove if it causes
   conflicts with other intended styles. */
body,
.admin,
.admin * {
    font-family: var(--font-body) !important;
    color: var(--color-text);
}

/* Headings should use the heading font with sensible weights */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    -webkit-font-smoothing: antialiased;
}

.product-card {
    position: relative;
}

.product-cart-hover {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%, 40px);
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(.4, 0, .2, 1), transform 0.32s cubic-bezier(.4, 0, .2, 1);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(198, 164, 126, 0.12);
    padding: 8px;
    font-size: 18px;
    color: var(--color-accent);
    cursor: pointer;
    border: 1px solid #eee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: auto;
}

.product-card:hover .product-cart-hover,
.product-card:focus-within .product-cart-hover {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===== CART TABLE ===== */
.cart-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 18px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(198, 164, 126, 0.07);
    font-size: 1rem;
    min-width: 420px;
}

.cart-table th,
.cart-table td {
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
}

.cart-table th {
    background: #fff;
    color: #888;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid #f3efe9;
}

.cart-table td {
    color: #333;
}

.cart-table tr:last-child td {
    border-bottom: none;
}

.cart-table input[type="number"] {
    width: 64px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ececec;
    text-align: center;
    font-size: 0.98rem;
    background: #fff;
}

.cart-table .btn-remove {
    background: transparent;
    color: #ff5c3c;
    border: none;
    padding: 0;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.cart-table .btn-remove:hover {
    text-decoration: underline;
}

.cart-total-row {
    text-align: right;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 18px 0 8px 0;
    color: #c6a47e;
}

.cart-total-row span {
    color: #1a1a1a;
    margin-left: 8px;
}

.cart-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .cart-table {
        font-size: 0.95rem;
        min-width: 340px;
    }

    .cart-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cart-total-row {
        font-size: 1rem;
    }
}

/* Modern enhancements for cart layout */
.cart-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

.cart-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 36, 0.06);
}

.cart-card .cart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 14px 4px;
    border-bottom: 1px solid #f1ece6;
    margin-bottom: 12px;
}

.cart-summary {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 36, 0.06);
    border: 1px solid #f4f0ea;
    position: sticky;
    top: 90px;
}

.cart-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.92rem;
}

.cart-table td:first-child {
    text-align: left;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.cart-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f7f7;
    flex-shrink: 0;
}

.cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.cart-name {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.99rem
}

.cart-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center
}

.qty-btn {
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.qty-btn:hover {
    background: #f7f7f7
}

.price-cell {
    white-space: nowrap;
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.98rem
}

/* remove default table borders for cleaner card look */
.cart-table td,
.cart-table th {
    border: none;
}

.cart-table tr {
    border-bottom: 1px solid #f3efe9;
}

.cart-table tr:last-child {
    border-bottom: none;
}

/* remove heavy box for mobile inputs and make touch-friendly */
.cart-table input[type="number"] {
    padding: 8px 6px;
    font-size: 0.98rem;
}

/* summary CTA sizing */
.cart-summary .btn {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 10px;
    display: block
}

.cart-summary a.btn {
    text-align: center
}

/* lightweight seller row */
.seller-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fff);
    margin-bottom: 12px
}

.seller-row .seller-name {
    font-weight: 700;
    color: #444
}

/* inline small helper for remove-sub text next to delete button */
.remove-sub {
    font-size: 0.88rem;
    color: #ff6b6b;
    margin-left: 8px;
    vertical-align: middle;
}

@media (max-width: 980px) {
    .cart-container {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        order: 2;
    }
}

/* Accessibility focus states */
.cart-table input[type="number"]:focus,
.qty-btn:focus,
.btn-remove:focus {
    outline: 3px solid rgba(198, 164, 126, 0.12);
}

/* ===== PAGINATION (1 2 Tiếp ...) ===== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0 0 0;
    width: 100%;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 90px;
}

.pagination li {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

.page-link {
    display: block;
    min-width: 70px;
    padding: 12px 0;
    background: #fff;
    color: #c6a47e;
    border: 1.5px solid #e7e7e7;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(198, 164, 126, 0.08);
    margin: 0 1px;
    letter-spacing: 0.5px;
    cursor: pointer;
    outline: none;
}

.page-link.active,
.page-link:hover,
.page-link:focus {
    background: linear-gradient(90deg, #c6a47e 70%, #e7cba0 100%);
    color: #fff;
    border-color: #c6a47e;
    box-shadow: 0 6px 24px rgba(198, 164, 126, 0.13);
    outline: none;
}

@media (max-width: 600px) {
    .pagination {
        gap: 4px;
        max-width: 100%;
    }

    .page-link {
        padding: 10px 0;
        font-size: 15px;
        min-width: 36px;
        border-radius: 10px;
    }
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #1A1A1A;
    --color-accent: #C6A47E;
    --color-white: #FFFFFF;
    --color-gray: #F5F5F5;
    --color-text: #333333;
    /* font variables are declared earlier (import + fallback stacks) */
    --transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --lift-card: 10px;
    /* distance cards lift on hover/focus */
    --lift-img: 6px;
    /* image translate distance on hover */
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    background: #f5f6f7;
    /* light grey page background like Shopee */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== CONTAINER ===== */
.container {
    /* Wider container to accommodate 5-column product grid on large screens */
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HEADER ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.logo span {
    color: var(--color-accent);
}

/* logo image styling */
.logo .site-logo {
    height: 44px;
    width: auto;
    display: block;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* căn trái */
    height: 50px;
    /* chiều cao header (có thể chỉnh) */
}

.logo .site-logo {
    height: 40px;
    /* kích thước logo (nhỏ lại) */
    width: auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 768px) {
    .logo .site-logo {
        height: 36px;
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-menu a:hover {
    color: var(--color-accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    position: relative;
}

/* Dropdown menu for categories */
.main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-item {
    position: relative;
}

.has-dropdown .dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    display: none;
    min-width: 200px;
    padding: 8px 0;
}

.has-dropdown:hover .dropdown {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 14px;
    color: var(--dark);
    text-decoration: none;
}

.dropdown-item:hover {
    background: var(--muted);
}

.search-box input {
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    width: 250px;
    font-size: 14px;
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(198, 164, 126, 0.1);
}

.search-box button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    color: var(--color-accent);
}

.cart-icon {
    position: relative;
    font-size: 24px;
    cursor: pointer;
}

.cart-btn {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-accent);
    color: #fff;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    padding: 0 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease;
    display: inline-block;
}

.cart-count.bump {
    transform: scale(1.25);
}

/* ===== HERO SECTION ===== */
.hero {
    margin-top: 80px;
    height: 90vh;
    position: relative;
    overflow: hidden;
}

.hero-slider {
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    width: 90%;
    max-width: 800px;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.6), rgba(198, 164, 126, 0.4));
    z-index: 1;
}

.hero-content h1 {
    font-size: 64px;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 40px;
    animation: fadeInUp 1s ease-out 0.2s;
    animation-fill-mode: both;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(198, 164, 126, 0.4);
}

/* Giảm khoảng cách giữa các danh mục */
.section {
    padding-top: 50px !important;
    padding-bottom: 35px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Thu nhỏ khoảng cách giữa title và grid */
.section-title {
    margin-bottom: 18px !important;
}

/* Giảm padding cho section có nền xám F5F5F5 */
.section[style*="F5F5F5"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* Thu nhỏ khoảng cách giữa các card */
.products-grid {
    row-gap: 22px !important;
}



/* Accessible skip link */
.skip-link {
    position: absolute;
    left: 5px;
    top: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 1100;
    transform: translateY(-120%);
    transition: transform 0.18s ease, opacity 0.2s ease;
    opacity: 0;
}

.skip-link:focus {
    transform: translateY(0);
    opacity: 1;
    outline: 3px solid rgba(198, 164, 126, 0.25);
}

/* Visually hidden helper for accessibility */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Ghost button variant used in hero */
.btn-ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

/* ===== SECTION ===== */
.section {
    padding: 28px 0 28px;
}

/* Reveal on scroll - graceful no-JS fallback
   - By default (no JS) items are visible for accessibility.
   - When JS is active, the `.js` class is added to `<html>` and
     elements with `.reveal-on-scroll` will be hidden until observed.
*/
.reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(.2, .9, .2, 1), transform 0.6s cubic-bezier(.2, .9, .2, 1);
}

.js .reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
}

.js .reveal-on-scroll.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal-on-scroll,
    .js .reveal-on-scroll,
    .js .reveal-on-scroll.in-view {
        transition: none !important;
        transform: none !important;
    }
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
    /* Visible by default so content shows even without JS */
    opacity: 1;
    transform: none;
    transition: var(--transition);
}

.section-title.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.section-title h2 {
    font-size: 42px;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.section-title p {
    font-size: 18px;
    color: #666;
}

/* ===== CATEGORIES ===== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.category-card {
    position: relative;
    display: block;
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02));
    color: white;
    /* show by default (no-JS) */
    opacity: 1;
    transform: none;
    transition: transform 0.36s cubic-bezier(.2, .9, .2, 1), box-shadow 0.36s ease, opacity 0.28s ease;
}

.category-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Modern hover: gentle zoom + lift + reveal overlay text */
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), filter 0.36s ease;
    will-change: transform;
    display: block;
}

.category-card .category-overlay {
    padding: 18px;
}

.category-card:hover img {
    transform: scale(1.06) translateY(calc(-1 * var(--lift-img)));
    filter: brightness(0.86) saturate(1.03);
}

.category-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.18));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    text-align: center;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    opacity: 2;
    transform: none;
    transition: var(--transition);
    padding-top: 45px;
}

.section-title h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 1.2px;
    margin-bottom: 0.5em;
    text-shadow: 0 2px 12px rgba(198, 164, 126, 0.08);
    text-transform: uppercase;
}

.section-title p {
    font-size: 1.15rem;
    color: #888;
    margin-bottom: 0;
}


/* subtle card lift on hover */
.category-card {
    box-shadow: 0 8px 28px rgba(15, 23, 36, 0.06);
    transition: transform 0.36s cubic-bezier(.2, .9, .2, 1), box-shadow 0.36s ease;
}

.category-card:hover,
.category-card:focus-within {
    transform: translateY(calc(-1 * var(--lift-card)));
    box-shadow: 0 26px 64px rgba(15, 23, 36, 0.16);
    will-change: transform, box-shadow;
    z-index: 2;
}

/* Touch devices: disable hover transforms to avoid jumpiness */
@media (hover: none) {

    .category-card:hover,
    .category-card:active {
        transform: none;
    }

    .category-card img {
        transform: none !important;
        filter: none !important;
    }

    .category-overlay {
        transform: none;
        opacity: 1;
    }
}

/* ===== PRODUCTS ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    /* tighter gap to reduce vertical space */
    margin-bottom: 30px;
    width: 100%;
    align-items: start;
    justify-items: stretch;
}

.product-card {
    background: #fff;
    border-radius: 20px;
    overflow: visible;
    /* allow cart button to show outside card when animated */
    box-shadow: 0 8px 28px rgba(30, 41, 59, 0.12), 0 2px 8px rgba(198, 164, 126, 0.09);
    border: 1.5px solid #f1ece6;
    transition: var(--transition);
    opacity: 1;
    transform: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    position: relative;
    padding-bottom: 8px;
}

.product-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-10px) scale(1.018);
    box-shadow: 0 32px 80px rgba(198, 164, 126, 0.22), 0 4px 16px rgba(30, 41, 59, 0.13);
    border-color: var(--color-accent);
    will-change: transform, box-shadow, border-color;
    z-index: 999;
}

.product-image {
    position: relative;
    height: 160px;
    /* reduced image height for more compact cards */
    overflow: hidden;
    background: linear-gradient(135deg, #f9f9f9 70%, #f3e7d7 100%);
    border-bottom: 1px solid #f1ece6;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2, .8, .2, 1);
    display: block;
    border-radius: 0 0 12px 12px;
}

.product-card:hover .product-image img,
.product-card:focus-within .product-image img {
    transform: scale(1.2) translateY(calc(-1 * var(--lift-img)));
}


.product-image {
    position: relative;
    cursor: pointer;
}

.product-image img.alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.38s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1);
    z-index: 2;
    border-radius: 0 0 12px 12px;
}

.product-image img.main {
    position: relative;
    z-index: 1;
    transition: opacity 0.28s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1);
}

.product-card:hover .product-image img.alt,
.product-card:focus-within .product-image img.alt {
    opacity: 1;
    transform: scale(1.12) translateY(calc(-1 * var(--lift-img)));
}

.product-card:hover .product-image img.main,
.product-card:focus-within .product-image img.main {
    opacity: 0;
}

.product-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(90deg, #e74c3c 60%, #ffb199 100%);
    color: #fff;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.13);
    letter-spacing: 0.5px;
    z-index: 2;
}

.product-info {
    padding: 12px 12px 10px 12px;
    /* tighter padding */
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 3;
}

.product-category {
    color: var(--color-accent);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--color-primary);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
    /* smaller min-height to reduce card height */
}

.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.price-current {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-accent);
}

.price-old {
    font-size: 15px;
    color: #999;
    text-decoration: line-through;
}

.product-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: stretch;
    flex-wrap: nowrap;
    margin-top: 10px;
    padding-bottom: 6px;
}

.btn-add-cart,
.btn-view {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-add-cart {
    background: var(--color-accent);
    color: white;
}

.btn-view {
    background: var(--color-gray);
    color: var(--color-text);
}

.btn-add-cart,
.btn-view {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 0;
    text-align: center;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    box-shadow: 0 2px 8px rgba(198, 164, 126, 0.10);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.btn-add-cart {
    background: linear-gradient(90deg, var(--color-accent) 70%, #e7cba0 100%);
    color: #fff;
    border: 1.5px solid var(--color-accent);
    margin-right: 6px;
    box-shadow: 0 2px 12px rgba(198, 164, 126, 0.13);
}

.btn-view {
    background: #f7f7f7;
    color: var(--color-primary);
    border: 1.5px solid #e7e7e7;
}

.btn-add-cart:hover,
.btn-add-cart:focus {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 6px 24px rgba(198, 164, 126, 0.22);
}

.btn-view:hover,
.btn-view:focus {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    box-shadow: 0 6px 24px rgba(198, 164, 126, 0.18);
}

/* ===== FOOTER ===== */
.footer {
    background: #fafafa;
    color: var(--color-text);
    padding: 48px 0 28px 0;
    margin-top: 60px;
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 0.1px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-section h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-primary);
    letter-spacing: 0.6px;
    text-transform: none;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: var(--color-primary);
    transition: color 0.18s ease;
}

.footer-section a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.footer-section p {
    color: #666;
    font-size: 14px;
    margin-bottom: 0.7em;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0 0 0;
    border-top: 1px solid #f1ece6;
    color: #666;
    font-size: 14px;
    margin-top: 18px;
}

.footer .contact-info {
    color: #666;
    font-size: 0.95rem;
}

.footer .shop-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f3e7d7;
    display: inline-block;
}

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 10px 30px 10px;
    }

    .footer {
        padding: 40px 0 0 0;
    }

    .footer-bottom {
        font-size: 13px;
        padding: 18px 0 10px 0;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {

    .categories-grid,
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .categories-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu {
        display: none;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    .categories-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

    .search-box input {
        width: 150px;
    }
}

/* Flash / toast message under header */
.flash-message {
    max-width: 1200px;
    margin: 16px auto 0 auto;
    padding: 12px 18px;
    background: linear-gradient(90deg, #e7f7ef 0%, #f1fff6 100%);
    border-left: 4px solid var(--color-accent);
    color: #0f5132;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 36, 0.06);
    text-align: center;
}

/* Checkout specific */
.checkout-form {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

.checkout-form section,
.checkout-summary {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 6px 22px rgba(15, 23, 36, 0.06);
}

.checkout-summary .checkout-items {
    max-height: 320px;
    overflow: auto;
}

.checkout-summary img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
}

.checkout-form label {
    font-size: 0.95rem;
    color: #333;
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form textarea {
    font-size: 1rem;
}

@media (max-width: 980px) {
    .checkout-form {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        order: 2;
    }
}

@media (max-width: 600px) {
    .flash-message {
        margin: 12px 12px 0 12px;
        font-size: 0.95rem;
    }
}

/* Product Detail Modern Layout */
.page-product-detail .product-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.13);
    padding: 36px 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.page-product-detail .detail-images {
    flex: 1 1 420px;
    max-width: 480px;
}

.page-product-detail .main-image-box {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(30, 41, 59, 0.07);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-product-detail .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
}

.page-product-detail .main-image:hover {
    transform: scale(1.04);
}

.page-product-detail .detail-thumbs {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.page-product-detail .thumb-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #eee;
    box-shadow: 0 1px 4px rgba(30, 41, 59, 0.07);
    cursor: pointer;
    transition: border-color 0.2s;
}

.page-product-detail .thumb-img.active,
.page-product-detail .thumb-img:hover {
    border-color: #c6a47e;
}

.page-product-detail .detail-info {
    flex: 1 1 380px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-product-detail .luxury-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.2;
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

.page-product-detail .product-breadcrumb {
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #888;
}

.page-product-detail .price-block {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
}

.page-product-detail .price-current {
    font-size: 2rem;
    font-weight: 700;
    color: #c6a47e;
}

.page-product-detail .price-old {
    font-size: 1.2rem;
    color: #aaa;
    text-decoration: line-through;
}

.page-product-detail .price-badge {
    background: linear-gradient(90deg, #e74c3c 60%, #ffb199 100%);
    color: #fff;
    padding: 7px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.13);
    margin-left: 8px;
}

.page-product-detail .stock-status {
    font-size: 1.1rem;
    color: #444;
}

.page-product-detail .short-desc {
    font-size: 1.13rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 18px;
}

.page-product-detail .add-to-cart {
    margin-bottom: 10px;
}

.page-product-detail .add-to-cart .btn {
    padding: 16px 44px;
    border-radius: 16px;
    font-size: 1.13rem;
    background: linear-gradient(90deg, #c6a47e 70%, #e7cba0 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(198, 164, 126, 0.13);
    transition: background 0.2s, box-shadow 0.2s;
}

.page-product-detail .add-to-cart .btn:hover {
    background: linear-gradient(90deg, #e7cba0 70%, #c6a47e 100%);
    box-shadow: 0 6px 24px rgba(198, 164, 126, 0.22);
}

.page-product-detail label[for="product-quantity"] {
    font-size: 1.1rem;
    margin-right: 8px;
}

@media (max-width: 900px) {
    .page-product-detail .product-detail {
        flex-direction: column;
        gap: 32px;
        padding: 24px 8px;
    }

    .page-product-detail .detail-images,
    .page-product-detail .detail-info {
        max-width: 100%;
    }

    .page-product-detail .main-image-box {
        height: 260px;
    }
}

@media (max-width: 600px) {
    .page-product-detail .product-detail {
        padding: 8px 0;
        border-radius: 0;
        box-shadow: none;
    }

    .page-product-detail .main-image-box {
        height: 180px;
    }

    .page-product-detail .luxury-title {
        font-size: 1.3rem;
    }

    .page-product-detail .price-current {
        font-size: 1.2rem;
    }
}

/* Modern Product Detail Layout */
.product-detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.10);
    padding: 32px 24px;
    margin: 110px auto;
    max-width: 1200px;
}

.product-detail-left {
    flex: 1 1 40px;
    min-width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.product-detail-image {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    background: #f7f7f7;
    box-shadow: 0 2px 12px rgba(30, 41, 59, 0.08);
    margin-bottom: 18px;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.product-detail-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.product-detail-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.product-detail-thumb.selected {
    border-color: var(--color-accent);
}

.product-detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-right {
    flex: 1 1 340px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.product-detail-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.product-detail-price {
    font-size: 2rem;
    font-weight: 700;
    color: #ff5c3c;
    margin-bottom: 6px;
}

.product-detail-oldprice {
    font-size: 1.2rem;
    color: #999;
    text-decoration: line-through;
    margin-left: 12px;
}

.product-detail-badge {
    display: inline-block;
    background: linear-gradient(90deg, #ffb199 60%, #ff5c3c 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 6px 18px;
    margin-bottom: 8px;
}

.product-detail-meta {
    display: flex;
    gap: 18px;
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 8px;
}

.product-detail-desc {
    font-size: 1.15rem;
    color: #444;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
}

.product-detail-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
}

.btn-buy-now {
    background: linear-gradient(90deg, var(--color-accent) 70%, #ffb199 100%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 32px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(255, 92, 60, 0.13);
    transition: background 0.2s;
}

.btn-buy-now:hover {
    background: var(--color-primary);
}

.btn-add-cart {
    background: #fff;
    color: var(--color-accent);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 14px 24px;
    border: 2px solid var(--color-accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08);
    transition: background 0.2s, color 0.2s;
}

.btn-add-cart:hover {
    background: var(--color-accent);
    color: #fff;
}

.product-detail-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.product-detail-qty label {
    font-size: 1.1rem;
    color: #666;
    margin-right: 8px;
}

.product-detail-qty input[type="number"] {
    width: 64px;
    padding: 8px;
    border-radius: 8px;
    border: 1.5px solid #e7e7e7;
    text-align: center;
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .product-detail-container {
        flex-direction: column;
        gap: 24px;
        padding: 18px 8px;
    }

    .product-detail-left,
    .product-detail-right {
        min-width: 0;
        width: 100%;
    }

    .product-detail-image {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .product-detail-title {
        font-size: 1.3rem;
    }

    .product-detail-price {
        font-size: 1.2rem;
    }

    .product-detail-container {
        padding: 8px 2px;
        gap: 12px;
    }

    .product-detail-desc {
        font-size: 1rem;
        padding: 10px;
    }

    .btn-buy-now,
    .btn-add-cart {
        font-size: 1rem;
        padding: 10px 16px;
    }
}

/* Blog/Posts List Modern Style */
.blog-title-main {
    font-size: 2.3rem;
    font-weight: 800;
    color: #c6a47e;
    margin-bottom: 36px;
    text-align: center;
    letter-spacing: 1px;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.blog-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(15, 23, 36, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 420px;
    position: relative;
    cursor: pointer;
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(198, 164, 126, 0.05) 0%, rgba(198, 164, 126, 0.15) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.blog-card:hover::before {
    opacity: 1;
}

.blog-card:hover {
    box-shadow: 0 12px 40px rgba(198, 164, 126, 0.25);
    transform: translateY(-8px) scale(1.02);
}

.blog-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: relative;
}

.blog-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.blog-card:hover .blog-thumb::after {
    opacity: 1;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.15) rotate(2deg);
}

.blog-body {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
}

.blog-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    line-height: 1.4;
    min-height: 50px;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-title {
    color: #c6a47e;
}

.blog-excerpt {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 18px;
    flex: 1;
    line-height: 1.6;
}

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.blog-date {
    color: #bfa16b;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-date {
    color: #c6a47e;
}

.blog-btn {
    background: linear-gradient(135deg, #c6a47e 0%, #b89968 100%);
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(198, 164, 126, 0.15);
    position: relative;
    overflow: hidden;
}

.blog-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.blog-btn:hover::before {
    left: 100%;
}

.blog-btn:hover {
    background: linear-gradient(135deg, #a07c4b 0%, #8d6a3f 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(198, 164, 126, 0.3);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .blog-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .blog-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .blog-title-main {
        font-size: 1.8rem;
    }
}

@media (max-width: 600px) {
    .blog-title-main {
        font-size: 1.5rem;
    }

    .blog-list {
        gap: 16px;
    }

    .blog-body {
        padding: 18px 16px 16px 16px;
    }

    .blog-title {
        font-size: 1.05rem;
        min-height: 40px;
    }

    .blog-excerpt {
        font-size: 0.9rem;
    }
}

/* Product Grid Layout */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.products-grid.five-cols {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
    .products-grid.five-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .products-grid.five-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid.five-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .products-grid.five-cols {
        grid-template-columns: 1fr;
    }
}

/* Centered Section Titles */
.section-header-center {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

/* Update section header colors to match "Danh Mục Sản Phẩm" */
.section-header-center h2 {
    font-size: 2.2rem;
    font-weight: 800 !important;
    color: var(--color-accent) !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    display: inline-block;
}

.section-header-center p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.section-header-center .view-all-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.section-header-center .view-all-link:hover {
    border-bottom-color: var(--color-accent);
}