:root {
    --jk-black: #000;
    --jk-white:  #fff;
    --jk-red: #ff0000;
    --jk-green: #00ff00;
    --jk-blue: #0000ff;
    --jk-grey: #cecece;
    --jk-primary-color: #0a9e02;
    --jk-menu-background:  #0a9e02;
    --jk-menu-background-hover:  #3ea338;
    --jk-menu-text:  #fff;
    --jk-menu-border-hover:  #fff;
    
    --jk-theme-color: #0a9e02;
    --jk-theme-color-sub: #3ea338;
    --jk-theme-color-hover: #60645a;    
    --jk-text-primary-font: Roboto, sans-serif;
    --jk-text-second-font: Roboto Slab, sans-serif;
}

@font-face { font-family: 'Swiss CondensedBold'; src: url('../fonts/swiss-condensedbold.eot'); src: url('../fonts/swiss-condensedbold.eot?#iefix') format('embedded-opentype'), url('../fonts/swiss-condensedbold.woff') format('woff'), url('../fonts/swiss-condensedbold.ttf') format('truetype'), url('../fonts/swiss-condensedbold.svg#swiss-condensedbold') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'UTM Avo'; src: url('../fonts/UTM_Avo.ttf') format('truetype'); font-weight: normal; font-style: normal; }

body { color: var(--jk-black); font-family: 'Arial'; font-size: 14px; background: var(--jk-white); overflow-x: hidden; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, header nav, body, input, textarea, button, select {font-family: 'Tahoma', sans-serif; }

a, a:hover { color: var(--jk-black); text-decoration: none!important; }

ul { list-style-type: none; padding-left: 0px;}

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

article img {display: block;margin-left: auto;margin-right: auto;}

.no-padding{padding-left: 0px;padding-right: 0px}

/*
 * HEADER
 */
.header .h-hotline {color: #000; }

.header .h-hotline strong {font-size: 16px; }

.h-title {font-size: 25px; font-weight: 900; color: #373737; position: relative; padding-top: 15px; text-transform: uppercase; background-position: center left; letter-spacing: -1px; text-align: center;}

/*.h-title:before{content: ""; display: inline-block; width: 30px; height: 30px; position: absolute; left: 0px; top: 16px; left: 0px; background: url(../images/icon-image.png?1634098554181) no-repeat scroll -29px -168px; }*/

.h-hotline{display: block; margin-top: 0px; font-family: 'Swiss CondensedBold'; font-size: 16px; text-align: -webkit-center; text-transform: uppercase; color: var(--jk-black);}

.h-hotline a{color: var(--jk-black)}

/*
.splide__arrows button{border: none;}

.splide__arrow{display: initial;position: initial;}

.photoPacked{position:relative;background:url(../images/bg_sapham_fly.jpg) 30px 0 no-repeat;background-size:cover}

.photoPacked .btnLeft{width:30px;height:34px;text-indent:-9999px;left:50%;bottom:0;margin-left:-30px;background:url(../images/productdetail_circlearrow.png) no-repeat 0 0}

.photoPacked .btnLeft:hover{background-position:left bottom}

.photoPacked .btnRight{width:31px;height:34px;text-indent:-9999px;right:50%;bottom:0;margin-right:-31px;background:url(../images/productdetail_circlearrow.png) no-repeat right 0}

.photoPacked .btnRight:hover {background-position: right bottom;}

.left_fly .ct_viewmoto .fly_pic{width:100%;height:270px;overflow:hidden;margin-top:15px;text-align:center;position:relative}
*/

/* COLOR LIST */

/*
.product_color .color{display:block;height:55px;margin-left:0;padding:5px 0 5px 5px;background:#f7f7f7}

.product_color .color li{font-size:14px;font-weight:700;display:block;float:left;margin-right:6px;-moz-border-radius:17px;-webkit-border-radius:17px;border-radius:17px;overflow:hidden;line-height:10px}

.product_color .color li a{width:32px;height:32px;border:2px #dcdcdc solid;display:block;-moz-border-radius:17px;-webkit-border-radius:17px;border-radius:17px;overflow:hidden;text-indent:-9999px;margin-top:8px}

.product_color .color li a.active,.left_fly .color li a:hover{border:2px #9d9d9d solid;padding:2px;border:none;box-shadow:1px 1px 3px 0 #aaa;text-decoration:none}

.product_color .ct_viewmoto p{font-size:14px;margin-top:10px;margin:10px 5px;text-align:justify}

.product_color .price{
    font-size: 30px;
    margin-bottom: 15px;
    color: red;
    font-family: 'Swiss CondensedBold';}
.productThumb{text-align: center;}
*/

/*
 * DESKTOP MENU
 */
 
/*
.main-nav{background:var(--jk-primary-color);position:relative;z-index: 1;}

.main-nav:after{content:'';position:absolute;left:0;right:0;height:10px;top:100%;background-image:url("../images/shadow.png");background-position:center top -3px;background-repeat:no-repeat;}

.main-nav {text-align:center;}

.main-nav > ul{margin-bottom: 0px;}

.main-nav > ul > li{display:inline-block;vertical-align:middle;font-size:14px;}

.main-nav > ul > li > a{border-bottom: 3px solid transparent;display:block;text-transform:uppercase;color:var(--jk-white);font-weight:bold;position:relative;padding:14px 20px;}

.main-nav > ul > li > a:not(:only-child):after{position:absolute;font-family:"FontAwesome";content:"\f0d7";margin-left:7px;font-size:14px;}

.main-nav > ul > li:hover > a {background: var(--jk-theme-color-sub);border-bottom-color: var(--jk-white);}
    
.main-nav > ul > li.active > a {background: 0 0;color: var(--jk-theme-color);border-bottom-color: var(--jk-theme-color);}

.main-nav li{position:relative;text-align:left;}

.main-nav li ul{position:absolute;min-width:200px;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;z-index:1;margin-top:10px;pointer-events:none;opacity:0;padding-top:2px;background-color:var(--jk-menu-background);-webkit-box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.4);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.4);}

.main-nav li ul a{display:block;color: var(--jk-menu-text);font-size:12px;text-transform: uppercase;padding:11px 5px 10px 23px;}

.main-nav li ul li:hover > a{background: var(--jk-menu-background-hover);}

.main-nav li ul ul{left:100%;top:0;padding-top:0;margin-left:0px;}

.main-nav li:hover > ul{margin-top:0;pointer-events:all;opacity:1;}
*/

/*
 * MOBILE MENU
 */

 /*
.nav-open {position: absolute; right: 10px; top: 30px; margin-top: -20px; }

@media all and (max-width:991px){.header{padding:0px 0;}

    .menu-btn{display:inline-block;vertical-align:middle;width:40px;height:40px;border-radius:100%;background: var(--jk-white);position:absolute;z-index:1;}

    .menu-btn i{display:block;margin:auto;border-top:solid 2px var(--jk-primary-color);width:17px;border-bottom:double 7px var(--jk-primary-color);height:12px;margin-left:-2px;}

    .menu-btn.act i{width:auto;height:auto;border:none;}

    .menu-btn.act i:after, .menu-btn.act i:before{content:'';display:block;margin:auto;width:17px;border-bottom:solid 2px var(--jk-primary-color);}

    .menu-btn.act i:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin-top:-2px;}

    .menu-btn.act i:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}

    .menu-btn.v2{background:var(--jk-primary-color);}

    .menu-btn.v2 i{border-color: var(--jk-white);}

    .menu-btn.v2.act i:after, .menu-btn.v2.act i:before{border-color: var(--jk-white);}

    .main-nav .menu-primary-menu-container{display:none;}

    .m-nav{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-box-shadow:0 0 8px 0 rgba(102, 102, 102, 0.5);box-shadow:0 0 8px 0 rgba(102, 102, 102, 0.5);position:fixed;z-index:9;top:0;bottom:0;width:100px;right:-290px;}

    .m-nav.act{right:0;width:80%;background-color:var(--jk-white);}

    .m-nav .nav-ct{height:100%;overflow-y:auto;overflow-x:hidden;padding-top:17px;}

    .m-nav .nav-close{top:9px;right:10px;background:none;}

    /*
    .m-nav .h-hotline{display:block;margin-left:15px;margin-bottom:15px;font-size:15px;}

    .m-nav .h-hotline strong{color:var(--jk-primary-color);font-size:18px;}

    .m-nav .main-nav .menu-primary-menu-container{display:block;margin:0;padding:0;}

    .m-nav .main-nav > ul > li{display:block;margin:0;background-color: var(--jk-primary-color);}

    .m-nav .main-nav > ul > li > a{padding:11px 15px 9px 15px;border-top:solid 1px #e6e6e6;color: var(--jk-white);}

    .m-nav .main-nav > ul > li > a:not(:only-child):after{content:none;}

    .m-nav .main-nav > ul > li:hover > a{color: var(--jk-white);background:var(--jk-primary-color);}

    .m-nav .main-nav li{position:relative;}

    .m-nav .main-nav li ul{display:none;width:auto;position:static;background-color:#3ea338;border-bottom:none;opacity:1;-webkit-transition:none;transition:none;pointer-events:all;padding-left:20px;-webkit-box-shadow:none;box-shadow:none;}

    .m-nav .main-nav li ul:after{content:none;display:none;}

    .m-nav .main-nav li ul a{display:block;font-size:12px;background-color:var(--jk-theme-color-sub);color: var(--jk-white);border-top:solid 1px rgba(255, 255, 255, 0.8);border-bottom:none;padding:10px 15px 10px 15px;}

    .m-nav .main-nav li ul li:hover > a{background:var(--jk-theme-color-hover);color: var(--jk-white);}

    .m-nav .main-nav li ul ul a{padding-left:45px;}

    .m-nav .main-nav li .nav-drop{display:block;font-style:normal;height:42px;width:42px;text-align:center;padding-top:2px;font-size:21px;line-height:40px;background:rgba(0, 0, 0, 0.03);color: var(--jk-white);float:right;position:relative;z-index:1;cursor:pointer;}

    .m-nav .main-nav li .nav-drop:after{font-family:"FontAwesome";content:"\f0d7";}

    .m-nav .main-nav li .nav-drop.act:after{content:"\f0d8";}

    .m-nav .main-nav li:hover > .nav-drop{color: var(--jk-white);}

    .m-nav .main-nav li:hover > ul{margin-top:0;pointer-events:all;opacity:1;}
    
}
*/

/*
 * FOOTER
 */
 footer{margin-top:42px;}
 footer .footer{color:#fff;padding-top:5px;background-position: bottom center;background-size: cover;}
 footer .footer a{color:#fff;}
 footer .footer li{margin-bottom:5px;}
 footer .footer li:before{font-family:"FontAwesome";content:"\f0da";font-size:16px;margin-right:14px;}
 footer .footer li a:hover{margin-left:7px;}
 footer .foot{color:#fff;line-height:28px;background-image:url("../images/bg3.jpg");padding:15px 0;}
 footer .foot a:hover{text-decoration:underline;}
 .f-title{text-transform:uppercase;font-size:18px;font-weight:bold;margin: 10px 0px;}
 .f-title:after{content:'';display:block;height:2px;width:40px;background:#fff;margin-top:5px;}
 .f-line{padding-left:22px;position:relative;margin-bottom:10px;}
 .f-line i{position:absolute;font-size:16px;left:1px;top:1px;}
 .f-line p{text-transform:uppercase;margin-bottom:3px;font-weight: bold;}
 .f-line span{font-size: 13px;}
 .social{margin-top:30px;}
 .social a{display:inline-block;vertical-align:middle;width:40px;height:40px;border-radius:50%;background:#ffffff;font-size:16px;text-align:center;color:#4a6681;margin-right:17px;padding:10px;}
 .social a:last-child{margin-right:0;}
 .social a:hover{background:#4a6681;color:#fff;}
 
/*
 * HOME SERVICE
 */
 
.h-service .h-title, .h-customers .h-title, .h-accessory .h-title{
    color: #fff;
    text-align: center;
}

.h-service {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;    
}

h3.title {
    font-size:16px;
    font-weight: 600;
}

h3.title a {
    color: #11bd10;
}

/*
@media screen and (min-width: 600px){
    .has-mega-menu{
        position:static;
    }
    li.has-mega-menu .sub-menu {
        width: 100%;
        position: absolute;
        top: NNpx;
        z-index: 100;
        left:0px;
        right:0px;
    }
    li.has-mega-menu:hover>.sub-menu{
        display: flex;
        flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));   
    }
}
@media screen and (min-width: 992px){
    li.has-mega-menu:hover>.sub-menu{grid-template-columns: repeat(auto-fit,minmax(33.3333%, 1fr)); }
}
@media screen and (min-width: 1200px){
    li.has-mega-menu:hover>.sub-menu{grid-template-columns: repeat(auto-fit,minmax(25%, 1fr)); }
}
@media screen and (min-width: 600px){
    li.mega-menu-column {
        width: 100%;
        max-width: 100%;
        min-height: 1px;
        padding: 10px 25px;
        flex: 1 0 calc(50%);
    }
}
@media screen and (min-width: 992px){
    li.mega-menu-column {flex: 1 0 calc(33.333%);}
}
@media screen and (min-width: 1200px){
    li.mega-menu-column {flex: 1 0 calc(25%);}
}
.mega-menu-column img {
    display: block;
}
    */

    
@media screen and (max-width: 767px){

    .jangkeyte_product_item {text-align: center; }

    .jangkeyte_product_item .title {padding-top: 5px; text-align: center; font-size: 14px; color: #222222 !important; height: inherit; display: table-cell; line-height: 16px; }

    .jangkeyte_product_item .price {text-align: center; font-size: 12px; line-height: 12px; color: #444; padding-top: 4px; }

    .jangkeyte_accessory_item .title {text-align: center; font-size: 14px; color: #222222; }

    .h-title:before{transform: scale(0.65); top: -3px; }

    .h-title {font-size: 18px; padding-left: 26px; padding-top: 0px; padding-bottom: 5px; }

}

/*
 * GIỎ HÀNG
 */
          
.cart-wrapper {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 40px 0;
}

.product-card {
    background: white;
    border-radius: 12px;
    transition: transform 0.2s;
}

.product-card:hover {
    transform: translateY(-2px);
}

.quantity-input {
    width: 60px;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.product-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.summary-card {
    background: white;
    border-radius: 12px;
    position: sticky;
    top: 20px;
}

.checkout-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    transition: transform 0.2s;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.remove-btn {
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-btn:hover {
    color: #991b1b;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f3f4f6;
    border: none;
    transition: all 0.2s;
}

.quantity-btn:hover {
    background: #e5e7eb;
}

.discount-badge {
    background: #dcfce7;
    color: #166534;
    font-size: 0.875rem;
    padding: 4px 8px;
    border-radius: 6px;
}