/* ================================================
   PHONG THỦY CÁT LÀNH - Clone Eurus Breeze
   ================================================ */

:root {
    --font-heading: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --color-bg: #f9f4f0;
    --color-bg-alt: #f9f4f0;
    --color-card: #FFFFFF;
    --color-brown: #5C3A1E;
    --color-brown-dark: #3D2512;
    --color-brown-light: #7A5232;
    --color-accent: #C17F35;
    --color-accent-light: #D4963F;
    --color-text: #665c56;
    --color-heading: #211e1e;
    --color-text-secondary: #7A6B5D;
    --color-text-light: #A09585;
    --color-white: #FFFFFF;
    --color-border: #E5DDD0;
    --color-red: #5c7a1a;
    --color-green: #27AE60;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius-full: 100px;
    --shadow-sm: 0 1px 3px rgba(60,30,10,0.06);
    --shadow-md: 0 4px 12px rgba(60,30,10,0.08);
    --shadow-lg: 0 8px 30px rgba(60,30,10,0.10);
    --transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
    font-family:var(--font-body);
    background:var(--color-bg);
    color:var(--color-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading) !important;
}
a{text-decoration:none;color:inherit;transition:var(--transition);}
img{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;}
ul,ol{list-style:none;}
.container{max-width:1400px;margin:0 auto;padding:0 24px;}

.nourish-section{padding:0 !important;}
.nourish-grid{display:grid;grid-template-columns:1fr 1fr;min-height:380px;}
.nourish-img{overflow:hidden;padding:10px;height:600px;}
.nourish-img img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.nourish-content{padding:50px 50px;display:flex;flex-direction:column;justify-content:center;}

.announcement-bar{
    height:56px;
    background:#654530;
    font-size:16px;
    font-weight:400;
    border-bottom:none;
}
.announcement-bar .container{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.announcement-text{color:#e0ccbf;letter-spacing:0.5px;}
.announcement-text a{color:#ffffff;font-weight:600;margin-left:4px;}
.announcement-text a:hover{text-decoration:underline;}

.ticker-bar{
    background:#2c2c2c;
    overflow:hidden;
    white-space:nowrap;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.1);
    font-size:0.78rem;
    color:rgba(255,255,255,0.75);
}
.ticker-track{display:inline-flex;animation:ticker-scroll 40s linear infinite;}
.ticker-item{padding:0 40px;display:inline-flex;align-items:center;gap:8px;}
.ticker-item i{color:#d4af37;font-size:0.7rem;}
@keyframes ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

.site-header{
    background:#ffffff;
    height:96px;
    position:sticky;
    top:0;
    z-index:1000;
    transition:var(--transition);
    border-bottom:1px solid var(--color-border);
}
.site-header.scrolled{
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(12px);
    box-shadow:var(--shadow-sm);
    height:72px;
}
.site-header .container{
    height:100%;
    display:flex;
    align-items:center;
    gap:16px;
    max-width:none;
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;white-space:nowrap;}
.logo-icon{font-size:1.3rem;}
.logo-text{
    font-family:var(--font-heading);
    font-size:1.35rem;
    font-weight:600;
    color:var(--color-brown);
}
.logo-dot{color:var(--color-accent);}
.main-nav{display:flex;align-items:center;gap:32px;margin:0 auto;}
.nav-link{
    padding:8px 0;
    font-size:16px;
    font-weight:500;
    color:#222;
    border-radius:var(--radius-full);
    transition:var(--transition);
    position:relative;
}
.nav-link:hover{color:#5c7a1a;background:transparent;}
.nav-link i{font-size:0.6rem;margin-left:8px;opacity:0.5;}
.mobile-nav-header, .mobile-nav-footer { display: none; }
.nav-dropdown{position:relative;}
.dropdown-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    background:var(--color-white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    min-width:200px;
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:var(--transition);
    z-index:100;
}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{
    display:block;
    padding:10px 20px;
    font-size:0.85rem;
    color:var(--color-text-secondary);
}
.dropdown-menu a:hover{background:var(--color-bg);color:#000;}
.header-actions{display:flex;align-items:center;gap:0;flex-shrink:0;margin-left:auto;}
.header-search{display:flex;align-items:center;}
.header-search input{
    width:0;
    padding:0;
    opacity:0;
    border:none;
    background:transparent;
    font-size:0.85rem;
    transition:var(--transition);
}
.header-search:focus-within input{
    width:150px;
    padding:8px 14px;
    opacity:1;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-full);
    margin-right:4px;
}
.header-search button,
.header-icon-btn,
.btn-header-login{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text);
    font-size:1rem;
    transition:var(--transition);
    cursor:pointer;
}
.header-search button:hover,
.header-icon-btn:hover,
.btn-header-login:hover{background:transparent;color:#5c7a1a;}
.btn-cart{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--color-text);font-size:1rem;cursor:pointer;transition:var(--transition);stroke-width:2;}
.btn-cart:hover{background:transparent;color:#5c7a1a;}
.cart-count{position:absolute;top:2px;right:2px;background:#5c7a1a;color:white;font-size:0.6rem;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;}
.user-dropdown{position:relative;}
.user-dropdown-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:var(--color-white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    min-width:180px;
    padding:8px 0;
    display:none;
    z-index:100;
}
.user-dropdown-menu.show{display:block;}
.user-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:0.85rem;color:var(--color-text-secondary);}
.user-dropdown-menu a:hover{background:var(--color-bg);}
.user-dropdown-menu hr{border:none;border-top:1px solid var(--color-border);margin:4px 0;}
.mobile-menu-btn{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;background:none;border:none;}
.mobile-menu-btn span{width:22px;height:2px;background:var(--color-brown);transition:var(--transition);border-radius:2px;}

.hero-section{
    position:relative;
    overflow:hidden;
    background:var(--color-bg);
}
.hero-slider{position:relative;}
.hero-slide {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.6s ease, visibility 0.6s ease;
    display:flex;
    z-index:1;
}
.hero-slide.active {
    opacity:1;
    visibility:visible;
    z-index:2;
}
.hero-slide-image{
    flex:1;
    overflow:hidden;
}
.hero-slide-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:75vh;
}
.hero-slide-content{
    flex:0 0 38%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:60px 48px;
    background:var(--color-bg);
}
.hero-label{
    display:inline-block;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--color-text-secondary);
    margin-bottom:20px;
}
.hero-slide-content h1{
    font-family:var(--font-heading);
    font-size:2.6rem;
    font-weight:600;
    line-height:1.2;
    color:var(--color-brown);
    margin-bottom:20px;
}
.hero-slide-content h1 em{
    font-style:italic;
    color:var(--color-accent);
    text-decoration:underline;
    text-decoration-color:var(--color-accent);
    text-decoration-style:wavy;
    text-underline-offset:4px;
    text-decoration-thickness:1.5px;
}
.hero-slide-content p{
    font-size:0.9rem;
    color:var(--color-text-secondary);
    line-height:1.7;
    margin-bottom:28px;
    max-width:340px;
}
.hero-nav{
    position:absolute;
    bottom:30px;
    right:30px;
    display:flex;
    gap:8px;
    z-index:10;
}
.hero-nav-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--color-white);
    border:1px solid var(--color-border);
    color:var(--color-brown);
    font-size:0.85rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}
.hero-nav-btn:hover{background:var(--color-brown);color:white;border-color:var(--color-brown);}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 32px;
    background:var(--color-brown);
    color:var(--color-white);
    border-radius:var(--radius-full);
    font-size:0.88rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    border:none;
}
.btn-primary:hover{background:var(--color-brown-dark);transform:translateY(-1px);}
.btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 28px;
    background:transparent;
    color:var(--color-brown);
    border:1.5px solid var(--color-brown);
    border-radius:var(--radius-full);
    font-size:0.85rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}
.btn-outline:hover{background:var(--color-brown);color:white;}
.btn-dark{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 32px;
    background:var(--color-brown-dark);
    color:var(--color-white);
    border-radius:var(--radius-full);
    font-size:0.88rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    border:none;
}
.btn-dark:hover{background:var(--color-brown);transform:translateY(-1px);}

.section{padding:80px 0;}
.section-alt{background:var(--color-bg-alt);}
.section-header{text-align:center;margin-bottom:40px;}
.section-header h2{
    font-family:var(--font-heading);
    font-size:40px;
    font-weight:500;
    letter-spacing:-2px;
    color:#211e1e;
    margin-bottom:12px;
    line-height:1.3;
}
.section-header h2 em{
    font-style:italic;
    color:var(--color-accent);
    text-decoration:underline;
    text-decoration-color:var(--color-accent);
    text-decoration-style:wavy;
    text-underline-offset:4px;
    text-decoration-thickness:1.5px;
}
.section-header .subtitle{
    font-size:16px;
    font-weight:400;
    color:var(--color-text);
    max-width:500px;
    margin:0 auto;
}
.accent-line{
    display:block;
    width:50px;
    height:3px;
    background:var(--color-accent);
    margin:16px auto 0;
    border-radius:2px;
}

.brand-intro{
    max-width:750px;
    margin:0 auto;
    text-align:center;
    padding:80px 24px;
}
.brand-intro h2{
    font-family:var(--font-heading);
    font-size:2.4rem;
    font-weight:600;
    line-height:1.3;
    color:var(--color-text);
    margin-bottom:24px;
}
.brand-intro h2 em{
    font-style:italic;
    color:var(--color-accent);
    text-decoration:underline;
    text-decoration-color:var(--color-accent);
    text-decoration-style:wavy;
    text-underline-offset:5px;
    text-decoration-thickness:1.5px;
}
.brand-intro p{
    color:var(--color-text-secondary);
    font-size:0.92rem;
    line-height:1.8;
    margin-bottom:16px;
}
.brand-intro .commitment{
    font-weight:600;
    color:var(--color-text);
    margin-top:24px;
    margin-bottom:8px;
}
.brand-intro .commitment-list{
    color:var(--color-text-secondary);
    font-size:0.88rem;
    line-height:2;
}
.brand-intro .commitment-list strong{color:var(--color-text);}

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

.product-slider{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:8px;
}
.product-slider::-webkit-scrollbar{display:none;}
.product-slider .product-card{
    min-width:calc((100% - 72px) / 4);
    max-width:calc((100% - 72px) / 4);
    flex-shrink:0;
}
.slider-wrapper{
    position:relative;
}
.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--color-border);
    background:rgba(255,255,255,0.9);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    color:var(--color-text);
    transition:var(--transition);
    z-index:10;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.slider-arrow:hover{
    background:var(--color-brown);
    color:white;
    border-color:var(--color-brown);
}
.slider-arrow-left{left:-21px;}
.slider-arrow-right{right:-21px;}
.slider-scrollbar{
    width:100%;
    height:3px;
    background:var(--color-border);
    border-radius:3px;
    margin-top:24px;
    position:relative;
}
.slider-scrollbar-thumb{
    height:100%;
    background:var(--color-brown);
    border-radius:3px;
    width:30%;
    transition:left 0.2s ease;
    position:absolute;
    left:0;
}

.product-card{
    background:var(--color-white);
    border-radius:12px;
    transform:translateZ(0);
    transition:var(--transition);
}

.product-card-image{
    position:relative;
    overflow:hidden;
    aspect-ratio:1/1;
    background:var(--color-bg);
    border-radius:12px;
    transform:translateZ(0);
    isolation:isolate;
}
.product-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.product-badge{
    position:absolute;
    top:12px;
    left:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:3;
}
.badge-tag{
    display:inline-block;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.3px;
}
.badge-sale{background:var(--color-red);color:white;}
.badge-new{background:var(--color-accent);color:white;}
.badge-hot{background:#E67E22;color:white;}

.product-quickview{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-brown);
    font-size:0.8rem;
    z-index:3;
    opacity:0;
    transition:var(--transition);
    cursor:pointer;
    border:none;
}
.product-card:hover .product-quickview{opacity:1;}
.product-quickview:hover{background:var(--color-brown);color:white;}

.product-card-actions{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:12px;
    z-index:3;
    opacity:0;
    transform:translateY(8px);
    transition:var(--transition);
}
.product-card:hover .product-card-actions{opacity:1;transform:translateY(0);}
.btn-add-cart{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:12px 16px;
    background:#5c7a1a;
    color:var(--color-white);
    border-radius:var(--radius-sm);
    font-size:0.82rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    border:none;
}
.btn-add-cart:hover{background:#4a6215;}

.product-card-body{padding:16px 20px 32px;text-align:center;}
.product-card-category{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--color-accent);
    font-weight:600;
    margin-bottom:6px;
}
.product-card-name{font-size:16px;font-weight:500;margin-bottom:8px;}
.product-card-name a{color:#211e1e;}
.product-card-name a:hover{color:var(--color-accent);}
.product-card-price{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;}
.price-current{font-size:16px;font-weight:400;color:#5c7a1a;}
.price-old{font-size:14px;font-weight:300;color:var(--color-text-light);text-decoration:line-through;}
.product-card-sold{font-size:0.75rem;color:var(--color-text-light);}
.sold-bar{height:3px;background:var(--color-border);border-radius:2px;margin-top:6px;overflow:hidden;}
.sold-bar-fill{height:100%;background:var(--color-accent);border-radius:2px;}

.promo-banner{
    background:linear-gradient(135deg,var(--color-brown) 0%,var(--color-brown-light) 100%);
    border-radius:var(--radius-lg);
    padding:50px;
    position:relative;
    overflow:hidden;
    color:white;
}
.promo-content{position:relative;z-index:2;max-width:500px;}
.promo-content h2{
    font-family:var(--font-heading);
    font-size:2rem;
    font-weight:600;
    margin-bottom:14px;
    color:white;
}
.promo-content h2 em{
    font-style:italic;
    color:var(--color-accent-light);
    text-decoration:underline;
    text-decoration-color:var(--color-accent-light);
    text-decoration-style:wavy;
    text-underline-offset:4px;
    text-decoration-thickness:1.5px;
}
.promo-content p{color:rgba(255,255,255,0.8);margin-bottom:24px;font-size:0.9rem;}
.promo-pattern{
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    font-size:12rem;
    opacity:0.08;
    z-index:1;
}

.daily-deal{
    background:#f5e8df;
    border-radius:10px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.daily-deal-left{flex:1;display:flex;flex-direction:row;align-items:center;gap:32px;}
.daily-deal-text{display:flex;flex-direction:column;gap:0;}
.daily-deal-title-row{display:flex;align-items:center;gap:32px;}
.daily-deal-title-row h3{
    font-family:var(--font-heading);
    font-size:40px;
    font-weight:400;
    color:#211e1e;
}
.daily-deal-coupon{
    font-size:14px;
    font-weight:500;
    color:var(--color-text);
    text-transform:uppercase;
    border:1px solid rgba(0,0,0,0.25);
    padding:10px 16px 6px;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.daily-deal-desc{font-size:16px;font-weight:400;color:var(--color-text);}
.daily-deal-right{display:flex;align-items:center;gap:80px;}
.daily-deal-countdown{display:flex;gap:24px;}
.countdown-item{
    text-align:center;
    background:#5c7a1a;
    color:white;
    border-radius:8px;
    width:96px;
    height:96px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.countdown-item .number{display:block;font-size:32px;font-weight:500;line-height:1;margin-bottom:2px;}
.countdown-item .label{display:block;font-size:16px;font-weight:400;}

.btn-bundle-shop{
    background:#5c7a1a;
    color:white;
    border-radius:8px;
    padding:0 32px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:400;
    text-decoration:none;
    transition:var(--transition);
}
.btn-bundle-shop:hover{background:#4a6215;color:white;}

.affiliate-section{
    background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-brown-light) 100%);
    padding:60px 0;
    text-align:center;
    color:white;
}
.affiliate-section h2{
    font-family:var(--font-heading);
    font-size:1.8rem;
    font-weight:600;
    margin-bottom:12px;
}
.affiliate-section p{
    opacity:0.85;
    max-width:500px;
    margin:0 auto 24px;
    font-size:0.9rem;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.testimonial-card{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:30px;
    transition:var(--transition);
}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.testimonial-stars{color:var(--color-accent);font-size:0.85rem;margin-bottom:16px;letter-spacing:2px;}
.testimonial-text{
    font-size:0.88rem;
    color:var(--color-text-secondary);
    font-style:italic;
    line-height:1.7;
    margin-bottom:20px;
}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.testimonial-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--color-brown);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:0.85rem;
}
.testimonial-name{font-weight:600;font-size:0.85rem;}

.policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.policy-card{
    text-align:center;
    padding:30px 20px;
    background:var(--color-white);
    border-radius:var(--radius-lg);
    transition:var(--transition);
}
.policy-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.policy-icon{
    width:56px;
    height:56px;
    border-radius:var(--radius-md);
    background:var(--color-bg);
    color:var(--color-brown);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    margin:0 auto 16px;
}
.policy-card h4{font-size:0.92rem;font-weight:600;margin-bottom:6px;}
.policy-card p{font-size:0.8rem;color:var(--color-text-secondary);line-height:1.5;}

.newsletter-section{
    padding:48px 0 64px 0;
    text-align:center;
}
.newsletter-content h3{
    font-family:var(--font-heading);
    font-size:32px;
    font-weight:500;
    letter-spacing:-2px;
    margin-bottom:8px;
    color:var(--color-text);
}
.newsletter-content p{
    font-size:16px;
    font-weight:400;
    color:var(--color-text);
    margin-bottom:40px;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
}
.newsletter-form{
    display:flex;
    max-width:560px;
    margin:0 auto;
    gap:0;
    background:transparent;
    border-radius:6px;
    padding:4px;
    border:1px solid #d1d5db; /* Light gray border */
}
.newsletter-form input{
    flex:1;
    padding:12px 20px;
    border:none;
    background:transparent;
    font-size:0.95rem;
    color:var(--color-text);
}
.newsletter-form input::placeholder{color:#9ca3af;}
.newsletter-form button{
    padding:8px 24px;
    border-radius:4px;
    background:#5c7a1a;
    color:white;
    font-family:var(--font-heading);
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition);
    border:none;
    font-size:0.95rem;
}
.newsletter-form button:hover{background:#4a6215;}

.site-footer{
    background:#f5e8df;
    padding:72px 0 0;
    border-top:1px solid var(--color-border);
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:80px;
}
.footer-logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-heading);
    font-size:1.2rem;
    font-weight:500;
    color:#000;
    margin-bottom:14px;
}
.footer-desc{font-size:16px;font-weight:400;color:#665c56;line-height:1.7;margin-bottom:20px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text);
    font-size:0.82rem;
    transition:var(--transition);
}
.footer-social a:hover{background:#5c7a1a;color:white;border-color:#5c7a1a;}
.footer-col h4{
    font-size:18px;
    font-weight:500;
    text-transform:none;
    color:#211e1e;
    margin-bottom:24px;
}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul a{font-size:16px;font-weight:400;color:#665c56;}
.footer-col ul a:hover{color:var(--color-brown);}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:16px;font-weight:400;color:#665c56;}
.footer-contact li i{color:var(--color-accent);margin-top:5px;font-size:0.9rem;}
.footer-bottom{
    border-top:1px solid var(--color-border);
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:16px;
    font-weight:400;
    color:var(--color-text);
}

.social-float{
    position:fixed;
    right:20px;
    bottom:100px;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.social-float-item{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:1.1rem;
    box-shadow:var(--shadow-md);
    transition:var(--transition);
}
.social-float-item:hover{transform:scale(1.1);}
.social-float-item.zalo{background:#0068FF;}
.social-float-item.facebook{background:#0084FF;}
.social-float-item.phone{background:var(--color-green);}

.scroll-top{
    position:fixed;
    bottom:30px;
    right:24px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#5c7a1a;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    box-shadow:var(--shadow-md);
}
.scroll-top.visible{opacity:1;visibility:visible;}
.scroll-top:hover{background:#4a6215;transform:translateY(-2px);}

.page-header{
    text-align:center;
    padding:50px 0 40px;
}
.page-header h1{
    font-family:var(--font-heading);
    font-size:2rem;
    font-weight:600;
    color:var(--color-text);
    margin-bottom:8px;
}
.page-header p{color:var(--color-text-secondary);font-size:0.9rem;}
.products-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
    padding-bottom:80px;
}
.sidebar{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:28px;
    position:sticky;
    top:120px;
    height:fit-content;
}
.sidebar h3{
    font-family:var(--font-heading);
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    gap:8px;
}
.sidebar-group{margin-bottom:24px;}
.sidebar-group h4{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--color-accent);
    font-weight:600;
    margin-bottom:12px;
}
.sidebar-group a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    font-size:0.85rem;
    color:var(--color-text-secondary);
    border-radius:var(--radius-sm);
    transition:var(--transition);
}
.sidebar-group a:hover,.sidebar-group a.active{background:var(--color-bg);color:var(--color-brown);font-weight:600;}
.sidebar-group a .count{
    background:var(--color-bg);
    font-size:0.72rem;
    padding:2px 8px;
    border-radius:var(--radius-full);
    color:var(--color-text-light);
    font-weight:600;
}
.filter-tabs{display:flex;gap:8px;margin-bottom:30px;flex-wrap:wrap;}
.filter-tab{
    padding:10px 20px;
    border-radius:var(--radius-full);
    font-size:0.82rem;
    font-weight:600;
    color:var(--color-text-secondary);
    background:var(--color-white);
    cursor:pointer;
    transition:var(--transition);
    border:1px solid var(--color-border);
}
.filter-tab:hover,.filter-tab.active{
    background:var(--color-brown);
    color:white;
    border-color:var(--color-brown);
}
.products-count{font-size:0.82rem;color:var(--color-text-light);text-align:right;margin-bottom:16px;}
.product-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:40px;}
.pagination a,.pagination span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    font-size:0.85rem;
    font-weight:400;
    color:var(--color-text-secondary);
    transition:var(--transition);
}
.pagination a:hover,.pagination .current{background:var(--color-brown);color:white;}

.product-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:40px 0 80px;
}
.product-gallery{
    overflow:hidden;
}
.product-gallery img{border-radius:16px;width:100%;aspect-ratio:1/1;object-fit:cover;}
.product-info h1{
    font-family:var(--font-heading);
    font-size:1.8rem;
    font-weight:600;
    margin-bottom:16px;
    line-height:1.3;
}
.product-price-box{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    padding:16px 0;
    border-bottom:1px solid var(--color-border);
}
.product-price-box .price-main{font-size:1.6rem;font-weight:600;color:var(--color-red);}
.product-price-box .price-original{font-size:1rem;color:var(--color-text-light);text-decoration:line-through;}
.product-price-box .discount-tag{
    padding:4px 12px;
    background:var(--color-red);
    color:white;
    border-radius:var(--radius-full);
    font-size:0.75rem;
    font-weight:600;
}
.product-desc{
    color:var(--color-text-secondary);
    font-size:0.9rem;
    line-height:1.8;
    margin-bottom:28px;
}
.qty-selector{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:28px;
}
.qty-selector label{font-weight:600;font-size:0.88rem;}
.qty-input{
    display:flex;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    overflow:hidden;
}
.qty-input button{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--color-text);
    transition:var(--transition);
}
.qty-input button:hover{background:var(--color-bg);}
.qty-input input{
    width:50px;
    text-align:center;
    border:none;
    border-left:1px solid var(--color-border);
    border-right:1px solid var(--color-border);
    font-weight:600;
}
.no-spinners::-webkit-inner-spin-button,
.no-spinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinners {
    -moz-appearance: textfield;
}
.btn-group{display:flex;gap:12px;margin-bottom:28px;}
.product-meta{border-top:1px solid var(--color-border);padding-top:20px;}
.product-meta p{font-size:0.85rem;color:var(--color-text-secondary);margin-bottom:6px;}
.product-meta strong{color:var(--color-text);}

.pd-btn-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.pd-btn-cart-outline{
    display:flex;align-items:center;justify-content:center;
    padding:14px 24px;background:transparent;color:var(--color-text);
    border:1px solid var(--color-text);border-radius:var(--radius-sm);
    font-size:0.92rem;font-weight:400;text-decoration:none;transition:var(--transition);
}
.pd-btn-cart-outline:hover{background:var(--color-text);color:#fff;}
.pd-btn-buynow{
    display:flex;align-items:center;justify-content:center;
    padding:14px 24px;background:#5c7a1a;color:#fff;
    border-radius:var(--radius-sm);font-size:0.92rem;font-weight:500;
    text-decoration:none;transition:var(--transition);
}
.pd-btn-buynow:hover{background:#4a6215;}

.pd-size-select{
    flex:1;padding:12px 16px;border:1px solid var(--color-border);
    border-radius:var(--radius-sm);background:transparent;color:var(--color-text);
    font-size:0.88rem;font-family:var(--font-body);appearance:auto;cursor:pointer;
}
.pd-size-info{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:var(--color-accent);color:#fff;font-size:0.85rem;cursor:pointer;
}

.promo-badges{margin-bottom:20px;padding:16px 0;border-top:1px solid var(--color-border);}
.promo-label{font-size:0.82rem;font-weight:500;color:var(--color-text);margin-bottom:10px;display:block;}
.promo-list{display:flex;gap:10px;width:100%;}
.promo-list > a{flex:1 1 0;min-width:0;display:block;}
.promo-badge-img{width:100%;height:auto;border-radius:8px;transition:var(--transition);display:block;}
.promo-badge-img:hover{transform:translateY(-2px);opacity:0.9;}

.share-social{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.share-social > span{font-size:0.85rem;color:var(--color-text-secondary);}
.share-icons{display:flex;gap:8px;}
.share-icons a{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid var(--color-border);color:var(--color-text-secondary);
    font-size:0.85rem;transition:var(--transition);text-decoration:none;
}
.share-icons a:hover{background:#5c7a1a;color:#fff;border-color:#5c7a1a;}

.presentation-section{
    padding:40px 0;
    background:var(--color-bg);
}
.presentation-grid{
    display:flex;
    flex-direction:column;
    gap:0;
}
.presentation-item{
    overflow:hidden;
}
.presentation-item img{
    width:100%;
    height:auto;
    display:block;
}

.review-section{padding:60px 0;}
.review-slider-wrapper{position:relative;display:flex;align-items:center;gap:16px;}
.review-slider{
    display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;padding:10px 0;flex:1;
}
.review-slider::-webkit-scrollbar{display:none;}
.review-card{
    width:calc(50% - 12px);flex-shrink:0;scroll-snap-align:start;
    background:var(--color-white);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:24px;
    transition:var(--transition);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.review-card-content {flex:1;}
.review-card-image {
    width:120px;height:120px;border-radius:8px;object-fit:cover;flex-shrink:0;
    border:1px solid var(--color-border);background:#e2e8f0;
}
@media (max-width: 768px) {
    .review-card {
        width:calc(100% - 12px);
    }
}
.review-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.review-stars{margin-bottom:12px;}
.review-text{font-size:0.88rem;line-height:1.7;color:var(--color-text-secondary);margin-bottom:16px;}
.review-author{display:flex;align-items:center;gap:10px;}
.review-author img{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.review-author span{font-size:0.85rem;font-weight:500;color:var(--color-text);}
.review-arrow{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);
    background:var(--color-white);display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--color-text);font-size:0.85rem;transition:var(--transition);flex-shrink:0;
}
.review-arrow:hover{background:var(--color-bg);border-color:var(--color-text-light);}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    padding:40px 0 80px;
}
.contact-info h2{
    font-family:var(--font-heading);
    font-size:1.4rem;
    font-weight:600;
    margin-bottom:20px;
}
.contact-info-list li{
    display:flex;
    gap:14px;
    margin-bottom:20px;
    font-size:0.88rem;
    color:var(--color-text-secondary);
}
.contact-info-list li i{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--color-bg);
    color:var(--color-accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    flex-shrink:0;
}
.contact-form{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:36px;
}
.contact-form h2{
    font-family:var(--font-heading);
    font-size:1.4rem;
    font-weight:600;
    margin-bottom:24px;
}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:0.82rem;font-weight:600;margin-bottom:6px;color:var(--color-text);}
.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:12px 16px;
    background:var(--color-bg);
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    font-size:0.88rem;
    color:var(--color-text);
    transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(193,127,53,0.1);}
.form-group textarea{resize:vertical;min-height:120px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.section-blog{padding-bottom:0;}
.section-tiktok{padding-top:80px;padding-bottom:48px;}

.social-img-box .social-main-img { transition: transform 0.4s ease; }
.social-img-box:hover .social-main-img { transform: scale(1.03) !important; }

.social-img-box .social-overlay {
    position: absolute; top:0; left:0; right:0; bottom:0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.social-img-box:hover .social-overlay { opacity: 1 !important; }

.social-img-box .social-overlay img {
    transform: scale(0.8); transition: transform 0.3s ease;
}
.social-img-box:hover .social-overlay img { transform: scale(1) !important; }
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:0;}
.blog-card{background:#f0ede8;border-radius:10px;overflow:hidden;transition:var(--transition);}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.blog-card-image{aspect-ratio:1.5/1;overflow:hidden;}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.blog-card:hover .blog-card-image img{transform:scale(1.05);}
.blog-card-body{padding:24px;text-align:center;}
.blog-card-body h3{font-size:20px;font-weight:500;margin-bottom:12px;color:var(--color-text);}
.blog-card-body p{font-size:16px;font-weight:400;color:var(--color-text);line-height:1.6;margin:0;}
.page-content{
    max-width:800px;
    margin:0 auto;
    padding:40px 0 80px;
    font-size:0.92rem;
    color:var(--color-text-secondary);
    line-height:1.8;
}
.page-content h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--color-text);margin:32px 0 12px;}
.page-content p{margin-bottom:16px;}

.cart-table{
    width:100%;
    background:var(--color-white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:30px;
}
.cart-table th{
    background:var(--color-bg-alt);
    padding:14px 20px;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-text-secondary);
    font-weight:600;
    text-align:left;
}
.cart-table td{padding:16px 20px;border-bottom:1px solid var(--color-border);vertical-align:middle;}
.cart-summary{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:28px;
    text-align:right;
}

.auth-wrapper{
    max-width:440px;
    margin:60px auto;
    padding:0 24px 80px;
}
.auth-card{
    background:var(--color-white);
    border-radius:var(--radius-lg);
    padding:40px;
}
.auth-card h2{
    font-family:var(--font-heading);
    font-size:1.5rem;
    font-weight:600;
    text-align:center;
    margin-bottom:28px;
}

@media(max-width:1024px){
    .product-grid{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .products-layout{grid-template-columns:220px 1fr;gap:28px;}
    .policy-grid{grid-template-columns:repeat(2,1fr);}
    .responsive-grid-4{grid-template-columns:repeat(2,1fr) !important;gap:20px !important;}
    .responsive-grid-5{grid-template-columns:repeat(3,1fr) !important;}
    .hero-slide-content{flex:0 0 42%;padding:40px 30px;}
    .hero-slide-content h1{font-size:2rem;}
}
@media(max-width:768px){
    .main-nav{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:#f9f4f0;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;
        gap:0;
        z-index:9999;
        display:none;
        overflow-y:auto;
        padding-bottom:40px;
    }
    .main-nav.open{display:block;}
    
    .mobile-nav-header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid rgba(0,0,0,0.08); margin-bottom:8px; }
    .mnh-title { font-weight:500; font-size:1rem; color:var(--color-text); letter-spacing:0.5px; }
    .mnh-close { width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,0.1); color:var(--color-text); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
    
    .main-nav .nav-link { 
        display:flex; justify-content:space-between; align-items:center; 
        padding:16px 24px; border-bottom:1px solid rgba(0,0,0,0.05); 
        background:transparent; color:#333; font-size:0.95rem; border-radius:0;
    }
    .main-nav .nav-link i { font-size:0.8rem; opacity:0.8; margin-left:auto; }

    .mobile-nav-footer { display:flex; flex-direction:column; margin-top:16px; }
    .mnf-login { padding:16px 24px; display:flex; align-items:center; font-weight:600; font-size:0.95rem; border-bottom:1px solid rgba(0,0,0,0.05); }
    .mnf-login i { font-size:1.2rem; margin-right:12px; }
    .mnf-social { display:flex; justify-content:center; gap:24px; padding:24px; border-bottom:1px solid rgba(0,0,0,0.05); }
    .mnf-social a { color:#777; font-size:1.2rem; transition:var(--transition); }
    .mnf-social a:hover { color:var(--color-text); }

    .mobile-menu-btn{display:flex;}
    .mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
    .mobile-menu-btn.active span:nth-child(2){opacity:0;}
    .mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
    .site-header.scrolled { backdrop-filter: none !important; }
    .hero-slide{flex-direction:column;min-height:auto;}
    .hero-slide-image{height:260px;}
    .hero-slide-image.left{display:block;}
    .hero-slide-image.right{display:none;}
    .hero-slide-image img{min-height:260px;}
    .hero-slide-content{flex:none;padding:40px 24px;}
    .hero-slide-content h1{font-size:1.6rem;}
    .product-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
    .product-grid-3{grid-template-columns:repeat(2,1fr);gap:16px;}
    .testimonial-grid{grid-template-columns:1fr;}
    .policy-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .products-layout{grid-template-columns:1fr;}
    .sidebar{position:static;}
    .product-detail-grid{grid-template-columns:1fr;gap:30px;}
    .presentation-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .review-card{min-width:260px;}
    .contact-grid{grid-template-columns:1fr;}
    .blog-grid{grid-template-columns:1fr;}
    .product-slider{gap:16px;}
    .product-slider .product-card{min-width:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2);}
    .responsive-grid-3{grid-template-columns:1fr !important;gap:16px !important;}
    .responsive-grid-4{grid-template-columns:repeat(2,1fr) !important;gap:16px !important;}
    .responsive-grid-5{grid-template-columns:repeat(3,1fr) !important;gap:12px !important;}
    .m-banner-link{width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:16/9 !important;}
    .mobile-banner{width:100% !important;margin-left:0 !important;margin-right:0 !important;left:0 !important;right:0 !important;padding:0 16px !important;}
    h2.responsive-title{font-size:2rem !important;margin-bottom:24px !important;line-height:1.3 !important;}
    .social-float { bottom: 80px; right: 16px; gap: 8px; z-index: 999; }
    .scroll-top { bottom: 20px; right: 16px; }
    .social-float-item { width: 44px; height: 44px; font-size: 20px; }
    .announcement-text{font-size:0.85rem;text-align:center;}
    .section{padding:50px 0;}
    .section-header h2{font-size:1.6rem;}
    .brand-intro h2{font-size:1.8rem;}
    .daily-deal{flex-direction:column;gap:20px;text-align:center;padding:34px 24px 24px;}
    .daily-deal-left{flex-direction:column;align-items:center;}
    .daily-deal-coupon{margin:0 auto;width:fit-content;}
    .daily-deal-right{flex-direction:column;gap:24px;}
    .daily-deal-countdown{gap:12px;justify-content:center;}
    .btn-bundle-shop{height:48px !important;padding:2px 40px 0;width:auto;margin:auto;}
    .announcement-social{display:none;}
}
@media(max-width:480px){
    .product-grid{grid-template-columns:1fr 1fr;gap:12px;}
    .product-grid-3{grid-template-columns:1fr 1fr;gap:12px;}
    .responsive-grid-4{grid-template-columns:1fr !important;}
    .responsive-grid-5{grid-template-columns:1fr 1fr !important;}
    .mobile-banner-link{border-radius:12px !important;}
    h2.responsive-title{font-size:1.6rem !important;margin-bottom:16px !important;}
    .product-slider .product-card{min-width:calc((100% - 12px) / 2);max-width:calc((100% - 12px) / 2);}
    .container{padding:0 12px;}
    .hero-slide-content{padding:30px 16px;}
    .hero-slide-content h1{font-size:1.4rem;}
    .countdown-item{min-width:50px;padding:8px 10px;}
    .section{padding:40px 0;}
    
    .logo-text{font-size:1.05rem;white-space:nowrap;}
    .logo-icon{font-size:1.1rem;}
    .logo{flex-shrink:1;min-width:0;overflow:hidden;}
    .header-actions{gap:4px;}
    .header-actions button, .header-icon-btn, .btn-header-login, .btn-cart{width:26px !important;height:26px !important;min-width:26px;padding:0;}
    .btn-cart svg{width:16px;height:16px;}
}