/* =================================================================
 * Made In Japan - Template 2 (Sellzy inspired)
 * Design system: Teal primary, wellness/commerce, rounded soft cards
 * ================================================================= */

:root{
    /* Brand colors (Sellzy palette) */
    --fk-primary:        #088178;   /* deep teal */
    --fk-primary-dark:   #056d6e;
    --fk-primary-darker: #04535c;
    --fk-primary-light:  #e6f7f4;   /* mint bg */
    --fk-primary-soft:   #caf8e4;   /* primary-lighter */
    --fk-primary-mid:    #5ed9ba;   /* primary-light */
    --fk-accent:         #ffc107;   /* yellow warning (Sellzy deal badge) */
    --fk-accent-dark:    #b78103;
    --fk-accent-soft:    #fff7cd;
    --fk-secondary:      #3366ff;
    --fk-danger:         #cb0233;
    --fk-success:        #54d62c;

    /* Neutrals (Sellzy gray ramp) */
    --fk-bg:             #ffffff;   /* gray-100 */
    --fk-surface:        #ffffff;
    --fk-border:         #dfe3e8;   /* gray-300 */
    --fk-border-soft:    #f4f6f8;   /* gray-200 */
    --fk-text:           #161c24;   /* gray-900 */
    --fk-text-muted:     #495057;   /* light-secondary-text */
    --fk-text-light:     #919eab;   /* gray-500 / disabled */

    /* Radii + shadows (softer, larger per Sellzy) */
    --fk-radius-sm:  8px;
    --fk-radius:     12px;
    --fk-radius-lg:  16px;
    --fk-radius-xl:  24px;
    --fk-radius-2xl: 32px;
    --fk-radius-pill: 999px;

    --fk-shadow-sm: 0 1px 2px rgba(22,28,36,.04);
    --fk-shadow:    0 4px 12px rgba(22,28,36,.05);
    --fk-shadow-lg: 0 10px 28px rgba(22,28,36,.08);
    --fk-shadow-xl: 0 20px 44px rgba(22,28,36,.12);

    /* Typography (Sellzy: Urbanist headings + DM Sans body) */
    --fk-font:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fk-font-head:  'Urbanist', var(--fk-font);
    --fk-font-size:  14px;
    --fk-line:       1.55;

    /* Transition */
    --fk-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* Reset + base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
    margin:0;
    font-family:var(--fk-font);
    font-size:var(--fk-font-size);
    line-height:var(--fk-line);
    color:var(--fk-text);
    background:var(--fk-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--fk-text);text-decoration:none;transition:color var(--fk-transition);}
a:hover{color:var(--fk-primary);}
h1,h2,h3,h4,h5,h6{font-family:var(--fk-font-head);font-weight:700;color:var(--fk-text);margin:0 0 12px;line-height:1.25;letter-spacing:-.01em;}
h1{font-size:36px;font-weight:800;letter-spacing:-.02em;}
h2{font-size:28px;font-weight:700;}
h3{font-size:22px;font-weight:700;}
h4{font-size:18px;font-weight:600;}
h5{font-size:16px;font-weight:600;}
h6{font-size:14px;font-weight:600;}
p{margin:0 0 12px;}
ul,ol{margin:0;padding:0;}

.container{max-width:1400px;margin:0 auto;padding:0 16px;}

/* =================================================================
 * TOPBAR (thanh nho tren cung)
 * ================================================================= */
.topbar{
    background:var(--fk-primary-dark);
    color:rgba(255,255,255,.85);
    font-size:13px;
    padding:8px 0;
}
.topbar a{color:rgba(255,255,255,.85);}
.topbar a:hover{color:#fff;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%;}
.topbar-left,.topbar-right,
.top-left,.top-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.topbar-left > *,.topbar-right > *,
.top-left > *,.top-right > *{display:inline-flex;align-items:center;gap:6px;}

/* =================================================================
 * HEADER
 * ================================================================= */
.header{
    background:var(--fk-surface);
    padding:18px 0;
    border-bottom:1px solid var(--fk-border-soft);
    position:relative;
    z-index:40;
}
.header-flex{
    display:flex;
    align-items:center;
    gap:28px;
}

/* Logo */
.logo{flex-shrink:0;}
.logo a{display:inline-flex;align-items:center;gap:10px;}
.logo img{height:46px;width:auto;}
.logo-text{font-size:20px;font-weight:800;color:var(--fk-text);letter-spacing:-.3px;}

/* Search box */
.search-box{flex:1;min-width:0;}
.search-box form,.search-box .search{position:relative;width:100%;margin:0;}
.search-box input[type="search"],
.search-box input[type="text"],
.search-box .inputbox{
    width:100%;
    height:48px;
    padding:0 56px 0 20px;
    border:1.5px solid var(--fk-primary);
    border-radius:var(--fk-radius-pill);
    font-size:14px;
    font-family:var(--fk-font);
    background:var(--fk-surface);
    outline:none;
    transition:border-color var(--fk-transition),box-shadow var(--fk-transition);
}
.search-box input:focus{
    border-color:var(--fk-primary-dark);
    box-shadow:0 0 0 4px var(--fk-primary-light);
}
.search-box .btn,
.search-box button[type="submit"],
.search-box input[type="submit"]{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    height:40px;
    width:40px;
    border:0;
    border-radius:50%;
    background:var(--fk-primary);
    color:#fff;
    font-size:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background var(--fk-transition);
}

.search-box .btn:hover,
.search-box button[type="submit"]:hover{background:var(--fk-primary-dark);}

/* Header right: cart + hotline */
.header-right,.header-flex > .header-flex{
    display:flex;align-items:center;gap:18px;flex-shrink:0;
}
.cart-header{display:inline-flex;align-items:center;}
.cart-header a,.cart-header .cart-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;height:48px;    
    transition:all var(--fk-transition);
}
.cart-header a:hover{}
.cart-header .count,.cart-header .badge{
    position:absolute;top:-4px;right:-4px;
    min-width:20px;height:20px;
    padding:0 5px;
    color:#fff;
    font-size:11px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    border:2px solid #fff;
}

/* Hotline card */
.hotline{
    display:inline-flex;align-items:center;gap:12px;
    padding:8px 16px;
    background:var(--fk-primary-light);
    border:1px solid var(--fk-primary-soft);
    border-radius:var(--fk-radius);
    text-decoration:none;
    color:inherit;
    transition:all var(--fk-transition);
}
.hotline:hover{
    background:var(--fk-primary);
    border-color:var(--fk-primary);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:var(--fk-shadow);
}
.hotline:hover .hotline-label,
.hotline:hover .hotline-phone{color:#fff;}
.hotline-ico{
    width:38px;height:38px;
    border-radius:50%;
    background:var(--fk-primary);
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:background var(--fk-transition);
}
.hotline:hover .hotline-ico{background:#fff;color:var(--fk-primary);}
.hotline-text{display:flex;flex-direction:column;line-height:1.2;}
.hotline-label{font-size:12px;color:var(--fk-text-muted);font-weight:500;}
.hotline-phone{font-size:16px;color:var(--fk-primary-dark);font-weight:700;margin-top:2px;}

/* =================================================================
 * MENU BAR (Shop categories + main menu)
 * ================================================================= */
.main-menu{
    background:var(--fk-surface);
    border-bottom:1px solid var(--fk-border-soft);
    box-shadow:var(--fk-shadow-sm);
    position:relative;
    z-index:30;
}
.menu-flex{display:flex;align-items:stretch;gap:0;}

/* ========== MENU-CATEGORY (khoi trai - "Shop by Categories") ========== */
.menu-category{
    width:280px;
    height:56px;
    background:var(--fk-primary);
    color:#fff;
    font-weight:700;
    position:relative;
    display:flex;
    align-items:center;
    flex-shrink:0;
    min-width:0;
}
.menu-category > *{width:100%;min-width:0;}

.menu-category ul.nav.menu,
.menu-category ul.menu{
    list-style:none;margin:0;padding:0;
    height:100%;
    position:relative;
}
.menu-category ul.nav.menu > li,
.menu-category ul.menu > li{
    position:static;height:100%;
}
.menu-category ul.nav.menu > li > a,
.menu-category ul.menu > li > a{
    display:flex;align-items:center;gap:12px;
    height:100%;padding:0 20px;
    color:#fff !important;
    font-size:14px;font-weight:600;
    letter-spacing:.2px;text-decoration:none;
    text-transform:uppercase;
}
.menu-category ul.nav.menu > li > a::before,
.menu-category ul.menu > li > a::before{
    content:"";
    width:18px;height:14px;
    background-image:
        linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff),
        linear-gradient(#fff,#fff);
    background-size:100% 2px;
    background-position:top,center,bottom;
    background-repeat:no-repeat;
    flex-shrink:0;
}
.menu-category ul.nav.menu > li.deeper.parent > a::after,
.menu-category ul.menu > li.deeper.parent > a::after{
    content:"";
    margin-left:auto;
    width:10px;height:10px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s ease;
}
.menu-category ul.nav.menu > li:hover > a::after{
    transform:rotate(-135deg) translate(-2px,-2px);
}

/* Dropdown cua menu-category */
.menu-category ul.nav-child{
    list-style:none;margin:0;padding:10px 0;
    position:absolute;top:100%;left:0;
    width:280px;
    background:#fff;
    border:1px solid var(--fk-border);
    border-top:0;
    border-radius:0 0 var(--fk-radius) var(--fk-radius);
    box-shadow:var(--fk-shadow-xl);
    z-index:9999;
    display:none;
}
.menu-category ul.nav.menu > li:hover > ul.nav-child{display:block;}
.menu-category ul.nav-child li{position:relative;}
.menu-category ul.nav-child a{
    display:flex;align-items:center;
    padding:10px 20px;
    color:var(--fk-text);
    font-size:14px;font-weight:500;
    text-decoration:none;
    transition:all .15s ease;
}
.menu-category ul.nav-child a:hover{
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    padding-left:24px;
}
.menu-category ul.nav-child li.deeper.parent > a::after{
    content:"›";margin-left:auto;
    font-size:18px;opacity:.5;
}
.menu-category ul.nav-child ul.nav-child{
    top:-10px;left:100%;
    border-radius:var(--fk-radius);
    border-top:1px solid var(--fk-border);
}

/* ========== MENU-MAIN (menu ngang phai) ========== */
.menu-main{flex:1;min-width:0;}
.menu-main .mm-toggle{display:none;}
.menu-main .mm-panel{display:block;}

.menu-main ul.nav.menu{
    list-style:none;margin:0;padding:0 0 0 16px;
    display:flex;align-items:center;flex-wrap:wrap;
    height:56px;
}
.menu-main ul.nav.menu > li{
    position:relative;
    height:100%;
    display:flex;align-items:center;
}
.menu-main ul.nav.menu > li > a{
    position:relative;
    display:flex;align-items:center;
    height:100%;padding:0 16px;
    color:var(--fk-text);
    font-size:14px;font-weight:600;
    line-height:1;text-decoration:none;
    letter-spacing:.2px;
    transition:color .2s ease;
}
.menu-main ul.nav.menu > li:hover > a,
.menu-main ul.nav.menu > li.active > a,
.menu-main ul.nav.menu > li.current > a{
    color:var(--fk-primary);
}
.menu-main ul.nav.menu > li > a::after{
    content:"";
    position:absolute;left:16px;right:16px;bottom:10px;
    height:2px;background:var(--fk-primary);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .25s ease;
    border-radius:2px;
}
.menu-main ul.nav.menu > li:hover > a::after,
.menu-main ul.nav.menu > li.active > a::after,
.menu-main ul.nav.menu > li.current > a::after{transform:scaleX(1);}

.menu-main ul.nav.menu > li.deeper.parent > a{padding-right:30px;}
.menu-main ul.nav.menu > li.deeper.parent > a::before{
    content:"";
    position:absolute;right:12px;top:50%;
    width:8px;height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-75%) rotate(45deg);
    transition:transform .25s ease;
    opacity:.7;
}
.menu-main ul.nav.menu > li.deeper.parent:hover > a::before{
    transform:translateY(-25%) rotate(-135deg);
    opacity:1;
}

/* Dropdown main */
.menu-main ul.nav-child{
    list-style:none;margin:0;padding:8px 0;
    position:absolute;top:100%;left:0;
    min-width:240px;
    background:#fff;
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius);
    box-shadow:var(--fk-shadow-xl);
    z-index:9999;display:none;
    opacity:0;transform:translateY(8px);
    transition:opacity .18s ease,transform .18s ease;
}
.menu-main ul.nav.menu > li:hover > ul.nav-child{
    display:block;opacity:1;transform:translateY(0);
}
.menu-main ul.nav-child li{position:relative;}
.menu-main ul.nav-child a{
    display:flex;align-items:center;
    padding:10px 18px;
    color:var(--fk-text);
    font-size:14px;font-weight:500;
    text-decoration:none;white-space:nowrap;
    transition:all .15s ease;
}
.menu-main ul.nav-child a:hover{
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    padding-left:22px;
}
.menu-main ul.nav-child li.deeper.parent > a::after{
    content:"›";margin-left:auto;padding-left:10px;
    font-size:18px;opacity:.5;
}
.menu-main ul.nav-child ul.nav-child{top:-8px;left:100%;}
.menu-main ul.nav-child li:hover > ul.nav-child{
    display:block;opacity:1;transform:translateY(0);
}

/* =================================================================
 * HERO (banner + slider)
 * ================================================================= */
.hero{padding:20px 0;}
.hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
.hero-grid:has(.hero-right){grid-template-columns:1fr 320px;}
.hero-main{
    border-radius:var(--fk-radius-lg);
    overflow:hidden;
    background:var(--fk-surface);
    box-shadow:var(--fk-shadow);
}
.hero-side{
    display:flex;flex-direction:column;gap:16px;
}
.hero-side > *{
    border-radius:var(--fk-radius-lg);
    overflow:hidden;
    background:var(--fk-surface);
    box-shadow:var(--fk-shadow);
}

/* =================================================================
 * SECTION HEADERS
 * ================================================================= */
.section{padding:40px 0;}
.section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:24px;gap:20px;flex-wrap:wrap;
}
.section-title{
    font-family:var(--fk-font-head);
    font-size:26px;font-weight:800;
    letter-spacing:-.01em;
    color:var(--fk-text);margin:0;
}
.section-sub{
    font-size:13px;color:var(--fk-text-muted);
    font-weight:500;margin-top:4px;
}
.section-more{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--fk-primary);
    font-size:14px;font-weight:600;
    text-decoration:none;
}
.section-more::after{
    content:"→";transition:transform .2s ease;
}
.section-more:hover::after{transform:translateX(4px);}

/* Section kicker (small uppercase above title - Sellzy style) */
.section-kicker{
    display:inline-block;
    padding:4px 12px;
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    border-radius:var(--fk-radius-pill);
    font-size:11px;font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    margin-bottom:10px;
    font-family:var(--fk-font-head);
}
.section-head-center{
    text-align:center;
    display:block;
    margin-bottom:32px;
}
.section-head-center .section-title{
    max-width:640px;margin:0 auto 8px;
}
.section-head-center .section-sub{
    max-width:560px;margin:0 auto;
}

/* =================================================================
 * HOT DEAL CARD (countdown block - Sellzy "Hot Deals This Week")
 * ================================================================= */
.hot-deal{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:0;
    border-radius:var(--fk-radius-xl);
    overflow:hidden;
    background:var(--fk-surface);
    box-shadow:var(--fk-shadow);
    border:1px solid var(--fk-border-soft);
}
.hot-deal-body{
    padding:36px 32px;
    display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.hot-deal-badge{
    display:inline-flex;align-items:center;gap:6px;
    align-self:flex-start;
    padding:5px 12px;
    background:var(--fk-accent-soft);
    color:var(--fk-accent-dark);
    border-radius:var(--fk-radius-pill);
    font-size:11px;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;
}
.hot-deal-title{
    font-family:var(--fk-font-head);
    font-size:28px;font-weight:800;
    line-height:1.2;letter-spacing:-.02em;
    color:var(--fk-text);margin:0;
}
.hot-deal-sub{
    color:var(--fk-text-muted);font-size:14px;margin:0;
}
.hot-deal-timer{
    display:flex;gap:10px;margin-top:8px;
}
.hot-deal-timer > div{
    min-width:64px;
    background:var(--fk-primary);
    color:#fff;
    border-radius:var(--fk-radius);
    padding:10px 8px;
    text-align:center;
    font-family:var(--fk-font-head);
    box-shadow:0 4px 12px -4px rgba(8,129,120,.5);
}
.hot-deal-timer .num{
    display:block;
    font-size:22px;font-weight:800;line-height:1;
}
.hot-deal-timer .lbl{
    display:block;
    font-size:10px;font-weight:600;
    letter-spacing:.5px;text-transform:uppercase;
    opacity:.85;margin-top:4px;
}
.hot-deal-cta{
    margin-top:6px;align-self:flex-start;
}
.hot-deal-media{
    background:var(--fk-primary-light);
    display:flex;align-items:center;justify-content:center;
    min-height:260px;
    position:relative;
}
.hot-deal-media img{
    max-width:100%;max-height:340px;
    object-fit:contain;
}

/* =================================================================
 * BLOG CARD (Sellzy "Latest Blog")
 * ================================================================= */
.blog-card{
    background:var(--fk-surface);
    border:1px solid var(--fk-border-soft);
    border-radius:var(--fk-radius-lg);
    overflow:hidden;
    transition:all var(--fk-transition);
}
.blog-card:hover{
    border-color:var(--fk-primary-soft);
    transform:translateY(-4px);
    box-shadow:var(--fk-shadow-lg);
}
.blog-card-media{
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--fk-bg);
}
.blog-card-media img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.blog-card:hover .blog-card-media img{transform:scale(1.05);}
.blog-card-body{padding:20px 22px;}
.blog-card-meta{
    display:flex;align-items:center;gap:12px;
    font-size:12px;color:var(--fk-text-light);
    margin-bottom:10px;
}
.blog-card-meta > span{display:inline-flex;align-items:center;gap:4px;}
.blog-card-title{
    font-family:var(--fk-font-head);
    font-size:17px;font-weight:700;line-height:1.35;
    margin:0 0 8px;
}
.blog-card-excerpt{
    font-size:13px;color:var(--fk-text-muted);
    margin:0 0 12px;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
}

/* =================================================================
 * PRODUCT CARDS (K2 items - Fastkart style)
 * ================================================================= */
.catItemView,
.itemContainer > .k2ItemsBlock li,
.genericItemView{
    list-style:none;
}

.product-card{
    background:var(--fk-surface);
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius-lg);
    overflow:hidden;
    transition:all var(--fk-transition);
    position:relative;
    display:flex;flex-direction:column;
    height:100%;
}
.product-card:hover{
    border-color:var(--fk-primary-soft);
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-2px);
}

.product-media{
    position:relative;
    background:var(--fk-bg);
    overflow:hidden;
    aspect-ratio:1/1;
}
.product-image{
    display:block;width:100%;height:100%;
    position:relative;
}
.product-image img{
    width:100%;height:100%;
    object-fit:contain;
    padding:12px;
    transition:transform var(--fk-transition);
}
.product-card:hover .product-image img{transform:scale(1.05);}

/* Badges (discount / new / etc) */
.badges{
    position:absolute;top:10px;left:10px;
    display:flex;flex-direction:column;gap:6px;
    z-index:2;
}
.badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:var(--fk-radius-sm);
    font-size:11px;font-weight:700;
    letter-spacing:.3px;
    line-height:1.4;
}
.badge-sale{background:var(--fk-danger);color:#fff;}
.badge-new{background:var(--fk-primary);color:#fff;}
.badge-hot{background:var(--fk-accent);color:#fff;}

/* Stock label */
.product-media .stock{
    position:absolute;bottom:10px;left:10px;
    background:rgba(255,255,255,.95);
    padding:4px 10px;
    border-radius:var(--fk-radius-sm);
    font-size:11px;font-weight:600;
    box-shadow:var(--fk-shadow-sm);
}

/* Quick action buttons on hover */
.product-actions{
    position:absolute;top:10px;right:10px;
    display:flex;flex-direction:column;gap:8px;
    opacity:0;transform:translateX(12px);
    transition:all var(--fk-transition);
    z-index:2;
}
.product-card:hover .product-actions{opacity:1;transform:translateX(0);}
.product-actions a,.product-actions button{
    width:34px;height:34px;
    border:0;border-radius:50%;
    background:#fff;color:var(--fk-text);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
    box-shadow:var(--fk-shadow);
    transition:all var(--fk-transition);
}
.product-actions a:hover,.product-actions button:hover{
    background:var(--fk-primary);color:#fff;transform:scale(1.1);
}

/* Product info */
.product-info{
    padding:14px 16px 18px;
    display:flex;flex-direction:column;gap:8px;
    flex:1;
}
.product-category{
    font-size:11px;
    color:var(--fk-text-light);
    text-transform:uppercase;letter-spacing:.5px;
    font-weight:600;
}
.product-title{
    font-size:14px;font-weight:600;
    color:var(--fk-text);
    line-height:1.4;
    margin:0;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:2.8em;
}
.product-title a{color:inherit;}
.product-title a:hover{color:var(--fk-primary);}

/* Rating */
.product-rating{
    display:flex;align-items:center;gap:6px;
    font-size:12px;
}
.product-rating .stars{color:#f5a623;letter-spacing:2px;}
.product-rating .reviews{color:var(--fk-text-light);}

/* Prices */
.product-prices{
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
    margin-top:auto;
}
.price-new{
    font-size:16px;font-weight:700;
    color:var(--fk-primary-dark);
}
.price-old{
    font-size:13px;font-weight:500;
    color:var(--fk-text-light);
    text-decoration:line-through;
}

/* Add to cart button */
.product-cart-btn{
    margin-top:10px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:9px 14px;
    border:1px solid var(--fk-primary);
    border-radius:var(--fk-radius);
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    font-size:13px;font-weight:600;
    text-decoration:none;
    transition:all var(--fk-transition);
}
.product-cart-btn:hover{
    background:var(--fk-primary);
    color:#fff;
}

/* =================================================================
 * GRID LAYOUT (itemList / k2-grid)
 * ================================================================= */
.itemList,.k2-grid,
.itemContainerLast + .itemContainer ~ .itemContainer,
.itemContainer{display:block;}

.itemList.k2-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:16px;
    margin:0;padding:0;
}
.itemContainer{
    margin:0 !important;padding:0 !important;
    width:auto !important;
    float:none !important;
}

/* =================================================================
 * CATEGORIES CIRCLE GRID (Browse by categories)
 * ================================================================= */
.cat-circles{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:20px;
    text-align:center;
}
.cat-circle{
    background:var(--fk-surface);
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius-lg);
    padding:20px 14px;
    text-decoration:none;
    transition:all var(--fk-transition);
    display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cat-circle:hover{
    border-color:var(--fk-primary);
    background:var(--fk-primary-light);
    transform:translateY(-4px);
    box-shadow:var(--fk-shadow-lg);
}
.cat-circle img{
    width:84px;height:84px;
    object-fit:contain;
    border-radius:50%;
    background:var(--fk-bg);
    padding:10px;
}
.cat-circle-name{
    font-size:13px;font-weight:600;
    color:var(--fk-text);
}
.cat-circle-count{
    font-size:11px;color:var(--fk-text-light);
}

/* =================================================================
 * DEAL BANNER (promo banners)
 * ================================================================= */
.deal-banner{
    background:linear-gradient(135deg,var(--fk-primary) 0%,var(--fk-primary-darker) 100%);
    color:#fff;
    padding:32px 28px;
    border-radius:var(--fk-radius-xl);
    position:relative;
    overflow:hidden;
    display:flex;align-items:center;gap:20px;
}
.deal-banner h3{color:#fff;font-size:22px;margin:0 0 8px;}
.deal-banner p{color:rgba(255,255,255,.9);margin:0 0 14px;}
.deal-banner .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 22px;
    background:#fff;color:var(--fk-primary-dark);
    font-weight:700;font-size:13px;
    border-radius:var(--fk-radius-pill);
    text-decoration:none;
    transition:all var(--fk-transition);
}
.deal-banner .btn:hover{background:var(--fk-accent);color:#fff;}

/* =================================================================
 * FOOTER (Sellzy-style: notched newsletter card + 5 columns)
 * ================================================================= */
footer,.footer{
    background:#0a4a47;
    color:rgba(255,255,255,.78);
    padding:0 0 0;
    margin-top:0;
    position:relative;
}
.footer a{color:rgba(255,255,255,.78);text-decoration:none;}
.footer a:hover{color:#fff;}
.footer h3,.footer h4{color:#fff;margin:0 0 20px;font-size:16px;font-weight:700;letter-spacing:.01em;}

/* ---- Notched newsletter card on top of footer ---- */
.foot-newsletter{
    background:#fff;
    padding:34px 0 70px;
    text-align:center;
    border-radius:0 0 56px 56px;
    margin-bottom:-50px;
    position:relative;z-index:2;
}
.foot-newsletter-title{
    margin:0 0 8px;
    font-family:var(--fk-font-head,inherit);
    font-size:24px;font-weight:800;color:#0f172a;
    letter-spacing:-.01em;line-height:1.2;
}
.foot-newsletter-sub{
    margin:0 0 18px;
    color:#64748b;font-size:14px;line-height:1.5;
}
.foot-newsletter-form{
    display:inline-flex;align-items:center;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:5px 5px 5px 18px;
    width:min(520px,90%);
    box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.foot-newsletter-ico{
    color:#94a3b8;display:inline-flex;align-items:center;margin-right:8px;flex-shrink:0;
}
.foot-newsletter-input{
    flex:1;min-width:0;
    border:0;outline:none;background:transparent;
    padding:10px 4px;
    font-size:14px;color:#0f172a;
}
.foot-newsletter-input::placeholder{color:#94a3b8;}
.foot-newsletter-btn{
    flex-shrink:0;
    padding:12px 26px;
    background:#088178;color:#fff;
    border:0;border-radius:999px;
    font-weight:700;font-size:13px;cursor:pointer;
    transition:all .2s ease;
    letter-spacing:.02em;
}
.foot-newsletter-btn:hover:not(:disabled){background:#056d6e;transform:translateY(-1px);}
.foot-newsletter-btn:disabled{background:#10b981;cursor:default;}

/* ---- Footer body ---- */
.foot-main{padding:90px 0 30px;}
.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1.5fr;
    gap:36px;
    margin-bottom:36px;
}
.footer ul{list-style:none;padding:0;margin:0;}
.footer ul li{margin-bottom:12px;}

/* ---- Brand column ---- */
.foot-brand-logo{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;}
.foot-brand-logo img{max-height:36px;display:block;}
.foot-brand-text{
    font-size:13px;line-height:1.7;color:rgba(255,255,255,.7);
    margin:0 0 18px;
}
.foot-socials{
    display:flex;gap:10px;margin:0 0 22px;padding:0;list-style:none;
}
.foot-socials a{
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.85);
    display:inline-flex;align-items:center;justify-content:center;
    transition:all .2s ease;
}
.foot-socials a:hover{background:#fff;color:#0a4a47;transform:translateY(-2px);}
.foot-socials svg{width:16px;height:16px;}

.foot-app-title{
    font-size:13px;font-weight:700;color:#fff;
    margin:0 0 10px;letter-spacing:.02em;
}
.foot-app-badges{display:flex;gap:10px;flex-wrap:wrap;}
.foot-app-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;
    background:#0f172a;color:#fff;
    border-radius:8px;text-decoration:none;
    transition:all .2s ease;
    min-width:120px;
}
.foot-app-badge:hover{background:#1e293b;transform:translateY(-1px);color:#fff;}
.foot-app-badge svg{flex-shrink:0;}
.foot-app-badge .foot-app-text{display:flex;flex-direction:column;line-height:1.1;}
.foot-app-badge .foot-app-text small{font-size:9px;opacity:.85;letter-spacing:.04em;}
.foot-app-badge .foot-app-text strong{font-size:13px;font-weight:700;letter-spacing:.01em;}

/* ---- Link columns (About / Account / Categories) ---- */
.foot-links a{
    display:inline-flex;align-items:center;gap:6px;
    color:rgba(255,255,255,.78);font-size:14px;
    transition:all .2s ease;
}
.foot-links a::before{
    content:"";
    width:6px;height:6px;
    border-right:2px solid currentColor;
    border-top:2px solid currentColor;
    transform:rotate(45deg);
    flex-shrink:0;
    margin-right:2px;
    transition:transform .2s ease;
}
.foot-links a:hover{color:#fff;}
.foot-links a:hover::before{transform:rotate(45deg) translate(2px,-2px);}

/* ---- Contact column ---- */
.foot-contact-list{margin:0;padding:0;list-style:none;}
.foot-contact-list li{
    display:flex;align-items:flex-start;gap:12px;
    margin-bottom:14px;
    color:rgba(255,255,255,.78);font-size:14px;line-height:1.5;
}
.foot-contact-ico{
    flex-shrink:0;
    width:36px;height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:1px;
}
.foot-contact-ico svg{width:16px;height:16px;}
.foot-contact-list a{color:inherit;}
.foot-contact-list a:hover{color:#fff;}

.foot-payments{
    display:flex;gap:8px;flex-wrap:wrap;
    margin-top:18px;
}
.foot-pay{
    width:46px;height:30px;
    border-radius:5px;
    background:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    overflow:hidden;
}
.foot-pay img,.foot-pay svg{max-width:80%;max-height:60%;display:block;}

/* ---- Footer bottom ---- */
.foot-bottom{
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
    color:rgba(255,255,255,.7);
    font-size:13px;
}
.foot-bottom a{color:#fff;}

/* ---- Responsive ---- */
@media (max-width:1080px){
    .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:30px;}
    .footer-grid > .foot-brand{grid-column:1/-1;}
    .footer-grid > .foot-contact{grid-column:1/-1;}
}
@media (max-width:640px){
    .foot-newsletter{padding:24px 0 60px;border-radius:0 0 32px 32px;margin-bottom:-40px;}
    .foot-newsletter-title{font-size:20px;}
    .foot-newsletter-form{padding:4px 4px 4px 14px;}
    .foot-newsletter-btn{padding:10px 18px;font-size:12px;}
    .foot-main{padding:70px 0 20px;}
    .footer-grid{grid-template-columns:1fr;gap:28px;}
    .footer-grid > .foot-brand,.footer-grid > .foot-contact{grid-column:auto;}
    .foot-app-badges{justify-content:flex-start;}
}

/* Legacy classes (keep harmless empty rules so old templates dont break) */
.footer-bottom{
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:space-between;
    font-size:13px;color:rgba(255,255,255,.5);
    flex-wrap:wrap;gap:14px;
}

/* =================================================================
 * BUTTONS (generic)
 * ================================================================= */
.btn,.k2-btn,.button,
button.k2AddToCart,input.k2AddToCart,
.k2ReadMore{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 22px;
    border:1px solid var(--fk-primary);
    border-radius:var(--fk-radius-pill);
    background:var(--fk-primary);
    color:#fff;
    font-size:14px;font-weight:600;font-family:var(--fk-font);
    text-decoration:none;cursor:pointer;
    transition:all var(--fk-transition);
    line-height:1;
}
.btn:hover,.k2-btn:hover,.button:hover,
button.k2AddToCart:hover,input.k2AddToCart:hover,
.k2ReadMore:hover{
    background:var(--fk-primary-dark);
    border-color:var(--fk-primary-dark);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:var(--fk-shadow);
}
.btn-outline{
    background:transparent;color:var(--fk-primary);
}
.btn-outline:hover{background:var(--fk-primary);color:#fff;}
.btn-accent{
    background:var(--fk-accent);border-color:var(--fk-accent);
}
.btn-accent:hover{background:#e58a1a;border-color:#e58a1a;}

/* =================================================================
 * FORMS (generic inputs)
 * ================================================================= */
input[type="text"],input[type="email"],input[type="tel"],
input[type="password"],input[type="number"],input[type="search"],
textarea,select{
    width:100%;padding:10px 14px;
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius);
    font-size:14px;font-family:var(--fk-font);
    background:#fff;
    outline:none;
    transition:border-color var(--fk-transition),box-shadow var(--fk-transition);
}
input:focus,textarea:focus,select:focus{
    border-color:var(--fk-primary);
    box-shadow:0 0 0 3px var(--fk-primary-light);
}

/* =================================================================
 * HEADER ICONS (wishlist + account)
 * ================================================================= */
.header-icons{
    display:inline-flex;align-items:center;gap:6px;
}
.header-ico-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 12px;
    border-radius:var(--fk-radius);
    color:var(--fk-text);
    text-decoration:none;
    transition:all var(--fk-transition);
    line-height:1.1;
}
.header-ico-btn:hover{
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
}
.header-ico-btn svg{flex-shrink:0;}
.header-ico-label{
    font-size:13px;font-weight:600;
    color:var(--fk-text-muted);
    white-space:nowrap;
}
.header-ico-btn:hover .header-ico-label{color:var(--fk-primary-dark);}

/* =================================================================
 * MENU RIGHT (Deal highlight)
 * ================================================================= */
.menu-right{
    margin-left:auto;
    display:flex;align-items:center;
    flex-shrink:0;
}
.menu-deal{
    display:inline-flex;align-items:center;gap:8px;
    padding:0 18px;height:36px;
    border-radius:var(--fk-radius-pill);
    background:linear-gradient(135deg,var(--fk-accent),#f0a800);
    color:#161c24;
    font-size:13px;font-weight:700;
    text-decoration:none;letter-spacing:.2px;
    transition:all var(--fk-transition);
    box-shadow:0 4px 10px -3px rgba(255,193,7,.5);
    white-space:nowrap;
}
.menu-deal:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px -3px rgba(255,193,7,.6);
    color:#161c24;
}
.menu-deal-ico{
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;animation:fk-spin 6s linear infinite;
}
@keyframes fk-spin{to{transform:rotate(360deg);}}

/* =================================================================
 * BENEFITS STRIP (4 icons)
 * ================================================================= */
.benefits-strip{
    background:var(--fk-surface);
    border-bottom:1px solid var(--fk-border-soft);
    padding:18px 0;
}
.benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.benefit-item{
    display:flex;align-items:center;gap:14px;
    padding:0 8px;
    border-right:1px solid var(--fk-border-soft);
}
.benefit-item:last-child{border-right:0;}
.benefit-ico{
    flex-shrink:0;
    width:52px;height:52px;
    border-radius:50%;
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    display:inline-flex;align-items:center;justify-content:center;
    transition:all var(--fk-transition);
}
.benefit-item:hover .benefit-ico{
    background:var(--fk-primary);color:#fff;
    transform:scale(1.05);
}
.benefit-text{display:flex;flex-direction:column;line-height:1.3;}
.benefit-text strong{
    font-size:14px;font-weight:700;color:var(--fk-text);
    margin-bottom:2px;
}
.benefit-text span{
    font-size:12px;color:var(--fk-text-muted);
}

/* =================================================================
 * NEWSLETTER
 * ================================================================= */
.newsletter{
    padding:50px 0 30px;
}
.newsletter-box{
    background:linear-gradient(120deg,var(--fk-primary-darker) 0%,var(--fk-primary-dark) 55%,var(--fk-primary) 100%);
    border-radius:var(--fk-radius-xl);
    padding:42px 48px;
    color:#fff;
    display:flex;align-items:center;justify-content:space-between;gap:32px;
    flex-wrap:wrap;
    position:relative;overflow:hidden;
    box-shadow:var(--fk-shadow-lg);
}
.newsletter-box::before{
    content:"";position:absolute;
    right:-60px;bottom:-60px;
    width:260px;height:260px;
    background:radial-gradient(circle,rgba(255,193,7,.22),transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.newsletter-box::after{
    content:"";position:absolute;
    left:-40px;top:-40px;
    width:180px;height:180px;
    background:radial-gradient(circle,rgba(94,217,186,.18),transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.newsletter-left{flex:1;min-width:280px;position:relative;z-index:1;}
.newsletter-kicker{
    display:inline-block;
    padding:4px 12px;
    background:rgba(255,255,255,.15);
    border-radius:var(--fk-radius-pill);
    font-size:11px;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;
    margin-bottom:10px;
}
.newsletter-title{
    color:#fff;
    font-size:26px;font-weight:800;
    margin:0 0 6px;line-height:1.25;
}
.newsletter-sub{
    color:rgba(255,255,255,.85);
    font-size:14px;
    margin:0;
}
.newsletter-form{
    flex:1;min-width:300px;
    display:flex;align-items:center;
    background:#fff;
    border-radius:var(--fk-radius-pill);
    padding:6px 6px 6px 18px;
    position:relative;z-index:1;
    box-shadow:var(--fk-shadow);
    max-width:520px;
}
.newsletter-ico{
    color:var(--fk-text-light);
    margin-right:10px;
    display:inline-flex;align-items:center;
}
.newsletter-input{
    flex:1;
    border:0;outline:none;
    background:transparent;
    padding:10px 0;
    font-size:14px;font-family:var(--fk-font);
    color:var(--fk-text);
    min-width:0;
    width:auto;
}
.newsletter-input:focus{box-shadow:none;}
.newsletter-btn{
    flex-shrink:0;
    padding:12px 24px;
    background:var(--fk-primary);
    color:#fff;
    border:0;
    border-radius:var(--fk-radius-pill);
    font-size:13px;font-weight:700;
    font-family:var(--fk-font-head);
    cursor:pointer;
    transition:all var(--fk-transition);
    white-space:nowrap;
    letter-spacing:.3px;
}
.newsletter-btn:hover:not(:disabled){background:var(--fk-primary-darker);transform:translateY(-1px);}
.newsletter-btn:disabled{background:var(--fk-success);cursor:default;}

/* =================================================================
 * BOX94 - Sellzy "Newly Launched Products"
 * Teal bg section + curved title chip + horizontal slider + hover actions
 * ================================================================= */
.box94{
    --box94-bg:          #8ecdc4;  /* mint teal background */
    --box94-bg-deep:     #7ec2b8;
    position:relative;
    background:var(--box94-bg);
    border-radius:var(--fk-radius-xl);
    padding:110px 28px 28px;   /* top padding de chua chip + curtain */
    margin:40px 0;
    font-family:var(--fk-font);
    overflow:hidden;
}

/* --- Curtain trang tri tren cung (scalloped top edge) --- */
.box94::before{
    content:"";
    position:absolute;top:0;left:0;right:0;
    height:58px;
    background:var(--fk-surface);
    /* Cat scallop duong cong xuong bang mask */
    -webkit-mask-image:radial-gradient(circle at 50% 100%,transparent 28px,#000 28px);
            mask-image:radial-gradient(circle at 50% 100%,transparent 28px,#000 28px);
    -webkit-mask-size:72px 58px;
            mask-size:72px 58px;
    -webkit-mask-repeat:repeat-x;
            mask-repeat:repeat-x;
    -webkit-mask-position:center top;
            mask-position:center top;
    pointer-events:none;
    z-index:1;
}

/* --- Title chip (white floating pill o giua) --- */
.box94-chip-wrap{
    position:absolute;top:14px;left:0;right:0;
    display:flex;justify-content:center;
    pointer-events:none;
    z-index:2;
}
.box94-chip{
    pointer-events:auto;
    background:var(--fk-surface);
    padding:14px 44px 16px;
    min-width:300px;max-width:70%;
    text-align:center;
    border-radius:var(--fk-radius-lg);
    position:relative;
    box-shadow:0 10px 24px -10px rgba(22,28,36,.25),
               0 2px 6px rgba(22,28,36,.08);
}
.box94-chip-title{
    font-family:var(--fk-font-head);
    font-size:22px;font-weight:800;
    letter-spacing:-.01em;
    color:var(--fk-text);margin:0 0 4px;
    line-height:1.2;
}
.box94-chip-sub{
    font-size:13px;color:var(--fk-text-muted);
    font-weight:500;line-height:1.4;
}
.box94-chip-sub :is(img,svg){display:inline;vertical-align:-2px;}

/* --- Slider track --- */
.box94-slider-wrap{position:relative; }
.box94-slider{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 5 * 14px) / 6);  /* 6 cards visible */
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;              /* Firefox */
    -ms-overflow-style:none;            /* IE 10+ */
    padding:4px 0;
}
.box94-slider::-webkit-scrollbar{display:none;}

/* --- Card --- */
.box94-card{
    scroll-snap-align:start;
    background:var(--fk-surface);
    border-radius:var(--fk-radius);
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 2px 8px rgba(22,28,36,.06);
    transition:box-shadow var(--fk-transition),transform var(--fk-transition);
    min-width:0;
}
.box94-card:hover{
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-3px);
}

/* --- Media --- */
.box94-media{
    position:relative;
    aspect-ratio:1/1;
    background:var(--fk-surface);
    overflow:hidden;
}
.box94-img{display:block;width:100%;height:100%;}
.box94-img img{
    width:100%;height:100%;
    object-fit:contain;
    padding:14px;
    transition:transform .35s ease;
}
.box94-card:hover .box94-img img{transform:scale(1.06);}

.box94-out{
    position:absolute;top:10px;left:10px;z-index:2;
    padding:3px 10px;
    background:var(--fk-text);color:#fff;
    font-size:10px;font-weight:700;text-transform:uppercase;
    border-radius:var(--fk-radius-sm);letter-spacing:.4px;
}

/* --- Hover quick actions (3 circle overlay bottom center) --- */
.box94-actions{
    position:absolute;left:50%;bottom:10px;
    transform:translate(-50%,8px);
    display:flex;gap:6px;
    opacity:0;
    transition:all .28s ease;
    pointer-events:none;
}
.box94-card:hover .box94-actions{
    opacity:1;
    transform:translate(-50%,0);
    pointer-events:auto;
}
.box94-act{
    width:32px;height:32px;
    border-radius:50%;
    border:0;padding:0;
    background:var(--fk-surface);
    color:var(--fk-text);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;text-decoration:none;
    box-shadow:0 4px 10px -2px rgba(22,28,36,.18);
    transition:all var(--fk-transition);
}
.box94-act:hover{
    background:var(--fk-primary);
    color:#fff;
    transform:scale(1.08);
}
.box94-act-wish.is-active{background:var(--fk-danger);color:#fff;}
.box94-act-wish.is-active svg{fill:currentColor;}

/* --- Body --- */
.box94-body{
    padding:12px 14px 14px;
    display:flex;flex-direction:column;gap:6px;
    flex:1;
}
.box94-title{
    font-family:var(--fk-font);
    font-size:13px;font-weight:600;
    line-height:1.4;margin:0;
    color:var(--fk-text);
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.8em;
}
.box94-title a{color:inherit;text-decoration:none;}
.box94-title a:hover{color:var(--fk-primary);}

.box94-rating{display:flex;align-items:center;gap:6px;font-size:12px;}
.box94-stars{
    --rating:0;
    background:linear-gradient(90deg,
        #f5a623 calc(var(--rating) * 20%),
        #dfe3e8 calc(var(--rating) * 20%));
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    letter-spacing:2px;font-size:13px;
}
.box94-reviews{color:var(--fk-text-light);font-size:11px;font-weight:600;}

.box94-prices{
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
    margin-top:2px;
}
.box94-price{
    font-family:var(--fk-font-head);
    font-size:15px;font-weight:700;color:var(--fk-text);
}
.box94-price-old{
    font-size:12px;font-weight:500;
    color:var(--fk-text-light);text-decoration:line-through;
}
.box94-off{
    font-size:11px;font-weight:700;
    color:var(--fk-danger);letter-spacing:.2px;
}

/* --- Card footer (heart + add to cart) --- */
.box94-foot{
    display:flex;align-items:center;gap:8px;
    margin-top:auto;padding-top:4px;
}
.box94-wish-btn{
    flex-shrink:0;
    width:30px;height:30px;
    border-radius:50%;
    border:1px solid var(--fk-border);
    background:var(--fk-surface);
    color:var(--fk-text-muted);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all var(--fk-transition);
    padding:0;
}
.box94-wish-btn:hover{border-color:var(--fk-danger);color:var(--fk-danger);}
.box94-wish-btn.is-active{
    background:var(--fk-danger);border-color:var(--fk-danger);color:#fff;
}
.box94-wish-btn.is-active svg{fill:currentColor;}

.box94-cta{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:7px 10px;
    background:var(--fk-primary);color:#fff;
    border-radius:var(--fk-radius-pill);
    font-family:var(--fk-font-head);
    font-size:11px;font-weight:700;letter-spacing:.2px;
    text-decoration:none;
    transition:all var(--fk-transition);white-space:nowrap;
}
.box94-cta:hover{
    background:var(--fk-primary-darker);color:#fff;transform:translateY(-1px);
}
.box94-cta.is-disabled{background:var(--fk-text-light);pointer-events:none;opacity:.7;}

/* --- Bottom bar: nav arrows + view-all --- */
.box94-bar{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:16px;gap:14px;flex-wrap:wrap;
}
.box94-nav{display:flex;gap:8px;}
.box94-arrow{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.6);
    background:rgba(255,255,255,.35);
    color:var(--fk-text);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;
    transition:all var(--fk-transition);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.box94-arrow:hover{background:#fff;border-color:#fff;color:var(--fk-primary);}
.box94-arrow.is-disabled{opacity:.45;cursor:default;pointer-events:none;}

.box94-viewall{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 10px 9px 20px;
    background:var(--fk-surface);
    color:var(--fk-text);
    border-radius:var(--fk-radius-pill);
    font-family:var(--fk-font-head);
    font-size:13px;font-weight:700;
    text-decoration:none;
    box-shadow:0 4px 12px -4px rgba(22,28,36,.18);
    transition:all var(--fk-transition);
}
.box94-viewall:hover{
    color:var(--fk-primary);
    transform:translateY(-1px);
    box-shadow:var(--fk-shadow-lg);
}
.box94-viewall-ico{
    width:28px;height:28px;
    border-radius:50%;
    background:var(--fk-primary);
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform var(--fk-transition);
}
.box94-viewall:hover .box94-viewall-ico{
    transform:rotate(-45deg) scale(1.05);
    background:var(--fk-primary-darker);
}

/* --- Responsive --- */
@media (max-width:1280px){
    .box94-slider{grid-auto-columns:calc((100% - 4 * 14px) / 5);}
}
@media (max-width:1080px){
    .box94-slider{grid-auto-columns:calc((100% - 3 * 14px) / 4);}
    .box94{padding:100px 20px 24px;}
}
@media (max-width:860px){
    .box94-slider{grid-auto-columns:calc((100% - 2 * 12px) / 3);gap:12px;}
    .box94-chip{padding:12px 32px 14px;min-width:260px;}
    .box94-chip-title{font-size:19px;}
}
@media (max-width:560px){
    .box94-slider{grid-auto-columns:calc((100% - 1 * 10px) / 2);gap:10px;}
    .box94{
        padding:92px 14px 20px;
        border-radius:var(--fk-radius-lg);
    }
    .box94::before{
        height:46px;
        -webkit-mask-image:radial-gradient(circle at 50% 100%,transparent 22px,#000 22px);
                mask-image:radial-gradient(circle at 50% 100%,transparent 22px,#000 22px);
        -webkit-mask-size:56px 46px;
                mask-size:56px 46px;
    }
    .box94-chip{padding:10px 22px 12px;min-width:200px;max-width:86%;}
    .box94-chip-title{font-size:16px;}
    .box94-chip-sub{font-size:11px;}
    .box94-viewall{padding:7px 8px 7px 16px;font-size:12px;}
}

/* =================================================================
 * BOX93 - Sellzy "Our Products" grid + filter tabs
 * ================================================================= */
.box93{margin:24px 0;font-family:var(--fk-font);}

/* Category page variant (wrap trang K2 category) */
.box93-category{padding:20px 0 40px;}
.box93-category .box93-title-main{font-size:30px;font-weight:800;}
.box93-count{
    display:inline-block;
    margin-left:8px;
    font-size:16px;font-weight:600;
    color:var(--fk-text-light);
    vertical-align:middle;
}
.box93-desc{
    color:var(--fk-text-muted);font-size:14px;
    line-height:1.6;margin:-10px 0 22px;
    max-width:900px;
}
.box93-banner{
    margin-bottom:20px;border-radius:var(--fk-radius-lg);
    overflow:hidden;background:var(--fk-bg);
}
.box93-banner img{width:100%;height:auto;display:block;}
.box93-plugin{margin-bottom:16px;}

/* ===== Box93 variant: CATEGORIES (mod_k2_categories layout box93) ===== */
.box93-cats{margin:24px 0;}
.box93-cats-grid{gap:18px;}

/* Header right: filters + arrows */
.box93-head-right{
    display:flex;align-items:center;
    gap:12px;flex-wrap:wrap;
    margin-left:auto;
}
.box93-cats-nav{
    display:inline-flex;gap:8px;flex-shrink:0;
}
.box93-cats-arrow{
    width:38px;height:38px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--fk-surface);
    color:var(--fk-text);
    border:1px solid var(--fk-border-soft);
    border-radius:50%;
    cursor:pointer;
    transition:all var(--fk-transition);
}
.box93-cats-arrow:hover:not(.is-disabled){
    background:var(--fk-primary);
    color:#fff;
    border-color:var(--fk-primary);
    box-shadow:0 6px 14px rgba(8,129,120,.25);
}
.box93-cats-arrow.is-disabled{
    opacity:.4;cursor:not-allowed;pointer-events:none;
}

/* ===== GRID MODE (default - khong slider) ===== */
.box93-cats .box93-cats-grid{
    grid-template-columns:repeat(var(--box93-cats-cols,6),1fr);
}
/* Responsive grid (static mode): co lai theo man hinh, gioi han boi param */
@media (max-width:1280px){
    .box93-cats:not(.box93-cats-has-slider) .box93-cats-grid{
        grid-template-columns:repeat(min(var(--box93-cats-cols,6),5),1fr);
    }
}
@media (max-width:1080px){
    .box93-cats:not(.box93-cats-has-slider) .box93-cats-grid{
        grid-template-columns:repeat(min(var(--box93-cats-cols,6),4),1fr);
    }
}
@media (max-width:860px){
    .box93-cats:not(.box93-cats-has-slider) .box93-cats-grid{
        grid-template-columns:repeat(min(var(--box93-cats-cols,6),3),1fr);
    }
}
@media (max-width:560px){
    .box93-cats:not(.box93-cats-has-slider) .box93-cats-grid{
        grid-template-columns:repeat(min(var(--box93-cats-cols,6),2),1fr);
    }
}

/* ===== SLIDER MODE (khi categories > cols*rows) ===== */
.box93-cats-has-slider .box93-cats-grid{
    display:grid;
    grid-template-columns:none;
    grid-template-rows:repeat(var(--box93-cats-rows,2),1fr);
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (var(--box93-cats-cols,6) - 1) * 18px) / var(--box93-cats-cols,6));
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:4px;
}
.box93-cats-has-slider .box93-cats-grid::-webkit-scrollbar{display:none;}
.box93-cats-has-slider .box93-cat-card{scroll-snap-align:start;}

/* Responsive slider (co dan so cot hien thi) */
@media (max-width:1280px){
    .box93-cats-has-slider .box93-cats-grid{
        grid-auto-columns:calc((100% - (min(var(--box93-cats-cols,6),5) - 1) * 18px) / min(var(--box93-cats-cols,6),5));
    }
}
@media (max-width:1080px){
    .box93-cats-has-slider .box93-cats-grid{
        grid-auto-columns:calc((100% - (min(var(--box93-cats-cols,6),4) - 1) * 16px) / min(var(--box93-cats-cols,6),4));
        gap:16px;
    }
}
@media (max-width:860px){
    .box93-cats-has-slider .box93-cats-grid{
        grid-auto-columns:calc((100% - (min(var(--box93-cats-cols,6),3) - 1) * 12px) / min(var(--box93-cats-cols,6),3));
        gap:12px;
    }
}
@media (max-width:560px){
    .box93-cats-has-slider .box93-cats-grid{
        grid-auto-columns:calc((100% - (min(var(--box93-cats-cols,6),2) - 1) * 10px) / min(var(--box93-cats-cols,6),2));
        gap:10px;
    }
}

.box93-cat-card{
    background:var(--fk-surface);
    border:1px solid var(--fk-border-soft);
    transition:all var(--fk-transition);
}
.box93-cat-card:hover{
    border-color:var(--fk-primary);
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-3px);
}
.box93-cat-card .box93-media{
    aspect-ratio:1/1;
    background:var(--fk-primary-light);
}
.box93-cat-card .box93-img{
    display:flex;align-items:center;justify-content:center;
}
.box93-cat-card .box93-img img{
    padding:18px;
    object-fit:contain;
    transition:transform .4s ease;
}
.box93-cat-card:hover .box93-img img{transform:scale(1.08) rotate(-2deg);}

.box93-cat-ph{
    width:60%;height:60%;
    border-radius:50%;
    background:var(--fk-surface);
    color:var(--fk-primary);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--fk-font-head);
    font-size:42px;font-weight:800;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(8,129,120,.15);
}
.box93-cat-count{
    position:absolute;top:10px;right:10px;z-index:2;
    padding:3px 10px;
    background:rgba(255,255,255,.92);
    color:var(--fk-primary-dark);
    font-size:11px;font-weight:700;letter-spacing:.2px;
    border-radius:var(--fk-radius-pill);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 2px 6px rgba(22,28,36,.08);
}
.box93-cat-card .box93-body{
    padding:14px 14px 16px;
    text-align:center;
    gap:10px;
}
.box93-cat-card .box93-title{
    font-family:var(--fk-font-head);
    font-size:15px;font-weight:700;
    -webkit-line-clamp:1;line-clamp:1;
    min-height:auto;
    letter-spacing:-.01em;
}
.box93-cat-card .box93-foot{
    justify-content:center;
    padding-top:0;
}
.box93-cat-card .box93-cta{
    flex:0 1 auto;
    padding:8px 18px;
    background:transparent;
    color:var(--fk-primary);
    border:1px solid var(--fk-primary);
}
.box93-cat-card .box93-cta:hover{
    background:var(--fk-primary);
    color:#fff;
    border-color:var(--fk-primary);
}

/* "New" badge (xanh duong - khac badge sale do) */
.box93-new{
    position:absolute;top:10px;right:10px;z-index:2;
    padding:4px 10px;
    background:var(--fk-secondary);
    color:#fff;
    font-size:10px;font-weight:800;letter-spacing:.4px;
    text-transform:uppercase;
    border-radius:var(--fk-radius-sm);
    box-shadow:0 2px 6px rgba(51,102,255,.3);
}

/* --- Header row: title + filter pills --- */
.box93-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
    margin-bottom:22px;
}
.box93-title-main{
    font-family:var(--fk-font-head);
    font-size:26px;font-weight:800;
    letter-spacing:-.01em;color:var(--fk-text);
    margin:0;
}
.box93-filters{
    display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;
}
.box93-pill{
    display:inline-flex;align-items:center;
    padding:9px 18px;
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius-pill);
    background:var(--fk-surface);
    color:var(--fk-text);
    font-family:var(--fk-font);
    font-size:13px;font-weight:600;
    cursor:pointer;
    transition:all var(--fk-transition);
    white-space:nowrap;
    line-height:1.2;
}
.box93-pill:hover{
    border-color:var(--fk-primary);
    color:var(--fk-primary);
}


/* --- Grid 6 cols --- */
.box93-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;
}

/* --- Card --- */
.box93-card{
    position:relative;
    background:var(--fk-surface);
    border:1px solid var(--fk-border-soft);
    border-radius:var(--fk-radius);
    overflow:hidden;
    display:flex;flex-direction:column;
    transition:all var(--fk-transition);
}
.box93-card:hover{
    border-color:var(--fk-primary-soft);
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-2px);
}

/* --- Media + badges --- */
.box93-media{
    position:relative;
    aspect-ratio:1/1;
    background:var(--fk-bg);
    overflow:hidden;
}
.box93-img{display:block;width:100%;height:100%;}
.box93-img img{
    width:100%;height:100%;
    object-fit:contain;
    padding:14px;
    transition:transform .35s ease;
}
.box93-card:hover .box93-img img{transform:scale(1.06);}

.box93-sale{
    position:absolute;top:0;left:10px;z-index:2;
    padding:5px 10px 7px;
    background:var(--fk-danger);
    color:#fff;
    font-size:10px;font-weight:800;letter-spacing:.4px;
    text-transform:uppercase;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow:0 2px 6px rgba(203,2,51,.3);
}
.box93-sale::after{
    content:"";
    position:absolute;left:100%;top:0;
    border-top:13px solid var(--fk-danger);
    border-right:6px solid transparent;
}
.box93-out{
    position:absolute;top:10px;right:10px;z-index:2;
    padding:3px 10px;
    background:var(--fk-text);color:#fff;
    font-size:10px;font-weight:700;text-transform:uppercase;
    border-radius:var(--fk-radius-sm);
    letter-spacing:.4px;
}

/* --- Body --- */
.box93-body{
    padding:12px 14px 14px;
    display:flex;flex-direction:column;gap:8px;
    flex:1;
}
.box93-title{
    font-family:var(--fk-font);
    font-size:13px;font-weight:600;
    line-height:1.4;margin:0;
    color:var(--fk-text);
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.8em;
}
.box93-title a{color:inherit;text-decoration:none;}
.box93-title a:hover{color:var(--fk-primary);}

/* --- Rating (gradient fill trick) --- */
.box93-rating{
    display:flex;align-items:center;gap:6px;
    font-size:12px;
}
.box93-stars{
    --rating:0;
    background:linear-gradient(90deg,
        #f5a623 calc(var(--rating) * 20%),
        #dfe3e8 calc(var(--rating) * 20%));
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    letter-spacing:2px;
    font-size:13px;
}
.box93-reviews{color:var(--fk-text-light);font-size:11px;font-weight:600;}

/* --- Prices --- */
.box93-prices{
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
    margin-top:2px;
}
.box93-price{
    font-family:var(--fk-font-head);
    font-size:15px;font-weight:700;
    color:var(--fk-text);
}
.box93-price-old{
    font-size:12px;font-weight:500;
    color:var(--fk-text-light);
    text-decoration:line-through;
}
.box93-off{
    font-size:11px;font-weight:700;
    color:var(--fk-danger);
    letter-spacing:.2px;
}

/* --- Footer: wishlist + add to cart --- */
.box93-foot{
    display:flex;align-items:center;gap:8px;
    margin-top:auto;padding-top:6px;
}
.box93-wish{
    flex-shrink:0;
    width:34px;height:34px;
    border-radius:50%;
    border:1px solid var(--fk-border);
    background:var(--fk-surface);
    color:var(--fk-text-muted);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:all var(--fk-transition);
    padding:0;
}
.box93-wish:hover{
    border-color:var(--fk-danger);
    color:var(--fk-danger);
}
.box93-wish.is-active{
    background:var(--fk-danger);
    border-color:var(--fk-danger);
    color:#fff;
}
.box93-wish.is-active svg{fill:currentColor;}

.box93-cta{
    flex:1;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 12px;
    background:var(--fk-primary);
    color:#fff;
    border-radius:var(--fk-radius-pill);
    font-family:var(--fk-font-head);
    font-size:12px;font-weight:700;
    text-decoration:none;
    letter-spacing:.2px;
    transition:all var(--fk-transition);
    white-space:nowrap;
}
.box93-cta:hover{
    background:var(--fk-primary-darker);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 14px -4px rgba(8,129,120,.5);
}
.box93-cta.is-disabled{
    background:var(--fk-text-light);
    pointer-events:none;opacity:.7;
}
.box93-cta svg{flex-shrink:0;}

/* --- Responsive grid --- */
@media (max-width:1280px){
    .box93-grid,
    .itemList.k2-grid{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:1080px){
    .box93-grid,
    .itemList.k2-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:860px){
    .box93-grid,
    .itemList.k2-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
    .box93-filters{gap:6px;}
    .box93-pill{padding:7px 14px;font-size:12px;}
    .box93-title-main{font-size:22px;}
}
@media (max-width:560px){
    .box93-grid,
    .itemList.k2-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .box93-body{padding:10px 10px 12px;}
    .box93-price{font-size:14px;}
    .box93-cta{font-size:11px;padding:7px 8px;}
    .box93-cta svg{display:none;}
    .box93-wish{width:30px;height:30px;}
    .box93-head{margin-bottom:14px;}
    .box93-filters{
        overflow-x:auto;flex-wrap:nowrap;
        width:100%;
        -ms-overflow-style:none;scrollbar-width:none;
    }
    .box93-filters::-webkit-scrollbar{display:none;}
}

/* =================================================================
 * RESPONSIVE
 * ================================================================= */
@media (max-width:1200px){
    .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;}
    .footer-grid > *:last-child{grid-column:1/-1;}
}

@media (max-width:1024px){
    .header-flex{gap:16px;flex-wrap:wrap;}
    .search-box{order:3;flex:0 0 100%;width:100%;}
    .header-ico-label{display:none;}
    .header-ico-btn{padding:10px;border-radius:50%;}
    .menu-right{display:none;}
    .benefits-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .benefit-item{padding:8px;border-right:0;background:var(--fk-bg);border-radius:var(--fk-radius);}
    .benefit-item:nth-child(2n){border-right:0;}
    .newsletter-box{padding:32px 24px;flex-direction:column;text-align:center;}
    .newsletter-form{width:100%;max-width:100%;}
    .hot-deal{grid-template-columns:1fr;}
    .hot-deal-media{order:-1;min-height:220px;}
    .main-menu{padding:10px 8px;}
    .menu-flex{gap:8px;}
    .menu-category,.menu-main{width:50%;height:auto;min-width:0;}
    .menu-category{min-height:52px;}
    .menu-category ul.nav.menu > li > a{font-size:13px;padding:0 14px;}
    .menu-category ul.nav-child{
        width:100%;left:0;
        border-radius:0 0 var(--fk-radius-lg) var(--fk-radius-lg);
        max-height:70vh;overflow-y:auto;
    }

    .menu-main{position:relative;}
    .menu-main .mm-toggle{
        display:flex;width:100%;min-height:52px;
        align-items:center;justify-content:space-between;
        padding:0 16px;
        font-size:14px;font-weight:700;letter-spacing:.3px;
        text-transform:uppercase;
        border:0;cursor:pointer;
        background:var(--fk-accent);
        color:#fff;
        border-radius:var(--fk-radius-lg);
        box-shadow:0 4px 12px -4px rgba(248,161,55,.5);
        transition:box-shadow var(--fk-transition);
        overflow:hidden;
    }
    .menu-main .mm-toggle:hover,
    .menu-main.mm-open .mm-toggle{box-shadow:0 6px 16px -4px rgba(248,161,55,.6);}
    .menu-main .mm-toggle .mm-icon{font-size:18px;}
    .menu-main.mm-open .mm-toggle .mm-icon{transform:rotate(90deg);transition:transform .2s ease;}

    .menu-main .mm-panel{
        display:none;
        position:absolute;right:0;top:calc(100% + 4px);
        width:100%;max-width:100vw;
        background:#fff;
        border:1px solid var(--fk-border);
        border-radius:var(--fk-radius-lg);
        box-shadow:var(--fk-shadow-xl);
        z-index:99999;
        max-height:70vh;overflow-y:auto;
    }
    .menu-main.mm-open .mm-panel{display:block;animation:fk-slide .2s ease-out;}
    @keyframes fk-slide{
        from{opacity:0;transform:translateY(-8px);}
        to{opacity:1;transform:translateY(0);}
    }

    .menu-main ul.nav.menu{display:block;flex-wrap:nowrap;height:auto;padding:6px 0;}
    .menu-main ul.nav.menu > li{width:100%;height:auto;display:block;}
    .menu-main ul.nav.menu > li > a{
        padding:12px 18px;height:auto;display:block;
        border-bottom:1px solid var(--fk-border-soft);
    }
    .menu-main ul.nav.menu > li > a:hover,
    .menu-main ul.nav.menu > li.active > a,
    .menu-main ul.nav.menu > li.current > a{
        background:var(--fk-primary-light);
        color:var(--fk-primary-dark);
    }
    .menu-main ul.nav.menu > li > a::after,
    .menu-main ul.nav.menu > li.deeper.parent > a::before{content:none !important;}
    .menu-main ul.nav-child{display:none !important;}

    .hero-grid,
    .hero-grid:has(.hero-right){grid-template-columns:1fr;}
    .hero-grid .hero-side{flex-direction:row;}

    .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:768px){
    .hotline-text{display:none;}
    .hotline{padding:8px;}
    .hotline-ico{width:36px;height:36px;}
    .benefits-grid{grid-template-columns:1fr 1fr;}
    .benefit-ico{width:44px;height:44px;}
    .benefit-text strong{font-size:13px;}
    .benefit-text span{font-size:11px;}
    .newsletter{padding:30px 0 10px;}
    .newsletter-title{font-size:20px;}
    .newsletter-form{padding:5px 5px 5px 14px;}
    .newsletter-btn{padding:10px 16px;font-size:12px;}
    .topbar{font-size:12px;padding:6px 0;}
    .topbar-left > *:not(:first-child),
    .top-left > *:not(:first-child){display:none;}

    .section{padding:24px 0;}
    .section-title{font-size:20px;}

    .hero-grid .hero-side{flex-direction:column;}
    .itemList.k2-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .cat-circles{grid-template-columns:repeat(3,1fr);gap:12px;}
    .cat-circle{padding:14px 8px;}
    .cat-circle img{width:64px;height:64px;}

    .footer{padding:40px 0 16px;margin-top:30px;}
    .footer-grid{grid-template-columns:1fr;gap:24px;}
    .footer-bottom{flex-direction:column;text-align:center;}
}

@media (max-width:480px){
    .logo img{height:36px;}
    .logo-text{display:none;}
    .header-flex{gap:10px;}
    .cart-header a{width:42px;height:42px;}
    .itemList.k2-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .product-info{padding:10px 12px 14px;}
    .product-title{font-size:13px;}
    .price-new{font-size:14px;}
}

/* =================================================================
 * SHOPCAT - Sellzy "Shop by Category" minimal (mod_k2_categories default2)
 * Card vuong chi co anh, ten category hien BEN DUOI card.
 * ================================================================= */
.shopcat{margin:24px 0;font-family:var(--fk-font);}

/* ---- Header: title + subtitle trai, nav arrows phai ---- */
.shopcat-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
    margin-bottom:22px;
}
.shopcat-head-left{display:flex;flex-direction:column;gap:4px;min-width:0;}
.shopcat-title{
    font-family:var(--fk-font-head);
    font-size:26px;font-weight:800;
    letter-spacing:-.01em;color:var(--fk-text);
    margin:0;line-height:1.2;
}
.shopcat-sub{
    color:var(--fk-text-muted);
    font-size:14px;line-height:1.5;
    margin:0;
}

.shopcat-nav{display:inline-flex;gap:8px;flex-shrink:0;}
.shopcat-arrow{
    width:38px;height:38px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--fk-surface);
    color:var(--fk-text);
    border:1px solid var(--fk-border);
    border-radius:50%;
    cursor:pointer;
    transition:all var(--fk-transition);
}
.shopcat-arrow:hover:not(.is-disabled){
    background:var(--fk-primary);
    color:#fff;
    border-color:var(--fk-primary);
    box-shadow:0 6px 14px rgba(8,129,120,.25);
}
.shopcat-arrow.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}

/* ---- GRID MODE (default - khong slider) ---- */
.shopcat-grid{
    display:grid;
    grid-template-columns:repeat(var(--shopcat-cols,8),1fr);
    gap:18px;
}

/* ---- SLIDER MODE (khi categories > cols*rows) ---- */
.shopcat-has-slider .shopcat-grid{
    grid-template-columns:none;
    grid-template-rows:repeat(var(--shopcat-rows,2),1fr);
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (var(--shopcat-cols,8) - 1) * 18px) / var(--shopcat-cols,8));
    overflow-x:auto;overflow-y:hidden;
    /* KHONG dung scroll-snap voi marquee continuous - se gay giat */
    scroll-behavior:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 0;
    /* Drag-to-scroll: hien cursor + chan select text khi keo */
    cursor:grab;
    -webkit-user-select:none;user-select:none;
    /* Chan native image-drag tren toan track */
    -webkit-user-drag:none;
}
.shopcat-has-slider .shopcat-grid::-webkit-scrollbar{display:none;}
.shopcat-has-slider .shopcat-grid img{
    -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.shopcat-has-slider .shopcat-grid.is-dragging{cursor:grabbing;}
.shopcat-has-slider .shopcat-grid.is-dragging a{pointer-events:none;}

/* ---- Item: card vuong + ten ben duoi ---- */
.shopcat-item{
    display:flex;flex-direction:column;
    align-items:center;
    gap:10px;
    min-width:0;
}
.shopcat-card{
    display:flex;align-items:center;justify-content:center;
    width:100%;aspect-ratio:1/1;
    background:var(--fk-primary-light,#e6f4f3);
    border:1px solid var(--fk-border-soft);
    border-radius:var(--fk-radius-lg,18px);
    overflow:hidden;
    text-decoration:none;
    transition:all var(--fk-transition);
}
.shopcat-card:hover{
    border-color:var(--fk-primary);
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-3px);
}
.shopcat-card img{
    width:100%;height:100%;
    object-fit:contain;    
    transition:transform .4s ease;
}
.shopcat-card:hover img{transform:scale(1.08) rotate(-2deg);}
.shopcat-ph{
    width:54%;height:54%;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--fk-surface);
    color:var(--fk-primary);
    font-family:var(--fk-font-head);
    font-size:28px;font-weight:800;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(8,129,120,.15);
}
.shopcat-name{
    display:-webkit-box;width:100%;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;line-clamp:1;
    overflow:hidden;text-overflow:ellipsis;
    text-align:center;
    font-family:var(--fk-font-head);
    font-size:14px;font-weight:600;
    color:var(--fk-text);
    text-decoration:none;
    line-height:1.3;
    transition:color var(--fk-transition);
}
.shopcat-name:hover{color:var(--fk-primary);}

/* ---- Responsive: grid mode co lai theo man hinh ---- */
@media (max-width:1280px){
    .shopcat:not(.shopcat-has-slider) .shopcat-grid{
        grid-template-columns:repeat(min(var(--shopcat-cols,8),6),1fr);
    }
    .shopcat-has-slider .shopcat-grid{
        grid-auto-columns:calc((100% - (min(var(--shopcat-cols,8),6) - 1) * 18px) / min(var(--shopcat-cols,8),6));
    }
}
@media (max-width:1080px){
    .shopcat:not(.shopcat-has-slider) .shopcat-grid{
        grid-template-columns:repeat(min(var(--shopcat-cols,8),5),1fr);
        gap:16px;
    }
    .shopcat-has-slider .shopcat-grid{
        grid-auto-columns:calc((100% - (min(var(--shopcat-cols,8),5) - 1) * 16px) / min(var(--shopcat-cols,8),5));
        gap:16px;
    }
}
@media (max-width:860px){
    .shopcat-title{font-size:22px;}
    .shopcat:not(.shopcat-has-slider) .shopcat-grid{
        grid-template-columns:repeat(min(var(--shopcat-cols,8),4),1fr);
        gap:12px;
    }
    .shopcat-has-slider .shopcat-grid{
        grid-auto-columns:calc((100% - (min(var(--shopcat-cols,8),4) - 1) * 12px) / min(var(--shopcat-cols,8),4));
        gap:12px;
    }
    .shopcat-name{font-size:13px;}
}
@media (max-width:560px){
    .shopcat-head{margin-bottom:16px;}
    .shopcat-title{font-size:20px;}
    .shopcat-arrow{width:34px;height:34px;}
    .shopcat:not(.shopcat-has-slider) .shopcat-grid{
        grid-template-columns:repeat(min(var(--shopcat-cols,8),3),1fr);
        gap:10px;
    }
    .shopcat-has-slider .shopcat-grid{
        grid-auto-columns:calc((100% - (min(var(--shopcat-cols,8),3) - 1) * 10px) / min(var(--shopcat-cols,8),3));
        gap:10px;
    }
    .shopcat-card{border-radius:14px;}
    .shopcat-name{font-size:12px;}
}

/* =================================================================
 * MODART - mod_articles_custom (com_content articles)
 * Default = grid card; Override box94 = slider marquee.
 * ================================================================= */
.modart{margin:24px 0;font-family:var(--fk-font);}

/* Header */
.modart-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.modart-head-left{display:flex;flex-direction:column;gap:4px;min-width:0;}
.modart-head-right{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;}
.modart-title-main{
    font-family:var(--fk-font-head);
    font-size:24px;font-weight:800;
    letter-spacing:-.01em;color:var(--fk-text);
    margin:0;line-height:1.2;
}
.modart-headlink{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--fk-primary);
    font-weight:600;font-size:13px;
    text-decoration:none;
}
.modart-headlink:hover{color:var(--fk-primary-dark);text-decoration:underline;}

.modart-pills{
    display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.modart-pill{
    display:inline-flex;align-items:center;
    padding:7px 14px;
    border:1px solid var(--fk-border);
    border-radius:var(--fk-radius-pill,999px);
    background:var(--fk-surface);
    color:var(--fk-text);
    font-size:12px;font-weight:600;
    text-decoration:none;
    transition:all var(--fk-transition);
    line-height:1.2;white-space:nowrap;
}
.modart-pill:hover{border-color:var(--fk-primary);color:var(--fk-primary);}
.modart-pill.is-active{
    background:var(--fk-primary);
    border-color:var(--fk-primary);
    color:#fff;
}

.modart-nav{display:inline-flex;gap:8px;}
.modart-arrow{
    width:36px;height:36px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--fk-surface);
    color:var(--fk-text);
    border:1px solid var(--fk-border);
    border-radius:50%;
    cursor:pointer;
    transition:all var(--fk-transition);
}
.modart-arrow:hover{
    background:var(--fk-primary);color:#fff;
    border-color:var(--fk-primary);
    box-shadow:0 6px 14px rgba(8,129,120,.25);
}

/* List GRID mode (default) */
.modart-list{
    display:grid;
    grid-template-columns:repeat(var(--modart-cols,4),1fr);
    padding: 10px 0;
    gap:20px;
}

/* SLIDER mode (override box94) */
.modart-has-slider .modart-list{
    grid-template-columns:none;
    grid-template-rows:repeat(var(--modart-rows,1),1fr);
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (var(--modart-cols,4) - 1) * 20px) / var(--modart-cols,4));
    overflow-x:auto;overflow-y:hidden;
    scroll-behavior:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:4px;
    cursor:grab;
    -webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;
}
.modart-has-slider .modart-list::-webkit-scrollbar{display:none;}
.modart-has-slider .modart-list img{
    -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.modart-has-slider .modart-list.is-dragging{cursor:grabbing;}
.modart-has-slider .modart-list.is-dragging a{pointer-events:none;}

/* Card */
.modart-card{
    display:flex;flex-direction:column;
    background:var(--fk-surface);
    border:1px solid var(--fk-border-soft);
    border-radius:var(--fk-radius-lg);
    overflow:hidden;
    transition:all var(--fk-transition);
    min-width:0;
}
.modart-card:hover{
    border-color:var(--fk-primary-soft);
    box-shadow:var(--fk-shadow-lg);
    transform:translateY(-3px);
}
.modart-media{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--fk-primary-light);
}
.modart-media img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.modart-card:hover .modart-media img{transform:scale(1.06);}

.modart-body{
    padding:16px 18px 18px;
    display:flex;flex-direction:column;gap:8px;
    flex:1;min-width:0;
}
.modart-cat{
    align-self:flex-start;
    display:inline-block;
    padding:3px 10px;
    background:var(--fk-primary-light);
    color:var(--fk-primary-dark);
    border-radius:var(--fk-radius-pill,999px);
    font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;
    text-decoration:none;
}
.modart-cat:hover{background:var(--fk-primary);color:#fff;}

.modart-title{
    font-family:var(--fk-font-head);
    font-size:16px;font-weight:700;
    line-height:1.35;
    margin:0;
    display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;line-clamp:2;
    overflow:hidden;
}
.modart-title a{
    color:var(--fk-text);text-decoration:none;
    transition:color var(--fk-transition);
}
.modart-title a:hover{color:var(--fk-primary);}

.modart-meta{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    color:var(--fk-text-muted);
    font-size:12px;
}
.modart-meta > span{display:inline-flex;align-items:center;gap:4px;}
.modart-meta svg{flex-shrink:0;color:var(--fk-text-light);}

.modart-intro{
    color:var(--fk-text-muted);
    font-size:13px;line-height:1.55;
    margin:0;
    display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-clamp:3;
    overflow:hidden;
}

.modart-more{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:4px;
    margin-top:auto;padding-top:4px;
    color:var(--fk-primary);
    font-weight:600;font-size:13px;
    text-decoration:none;
    transition:gap var(--fk-transition),color var(--fk-transition);
}
.modart-more:hover{color:var(--fk-primary-dark);gap:8px;}

/* Responsive */
@media (max-width:1080px){
    .modart-list{grid-template-columns:repeat(min(var(--modart-cols,4),2),1fr);gap:16px;}
    .modart-has-slider .modart-list{
        grid-auto-columns:calc((100% - (min(var(--modart-cols,4),3) - 1) * 16px) / min(var(--modart-cols,4),3));
        gap:16px;
    }
}
@media (max-width:760px){
    .modart-title-main{font-size:20px;}
    .modart-list{grid-template-columns:repeat(min(var(--modart-cols,4),2),1fr);gap:14px;}
    .modart-has-slider .modart-list{
        grid-auto-columns:calc((100% - (min(var(--modart-cols,4),2) - 1) * 14px) / min(var(--modart-cols,4),2));
        gap:14px;
    }
}
@media (max-width:480px){
    .modart-list{grid-template-columns:1fr;gap:12px;}
    .modart-has-slider .modart-list{
        grid-auto-columns:85%;gap:12px;
    }
    .modart-arrow{width:32px;height:32px;}
}

/* =================================================================
 * UTILITIES
 * ================================================================= */
.text-center{text-align:center;}
.text-muted{color:var(--fk-text-muted);}
.mt-0{margin-top:0;} .mt-2{margin-top:8px;} .mt-4{margin-top:16px;}
.mb-0{margin-bottom:0;} .mb-2{margin-bottom:8px;} .mb-4{margin-bottom:16px;}
.clr{clear:both;}