/*
Theme Name: JNews - Child Theme
Version: 1.0.2
Theme URI: http://themeforest.net/?ref=jegtheme
Description: A basic starter child theme for customization purpose of JNews theme.
Author: Jegtheme
Author URI: http://themeforest.net/user/jegtheme?ref=jegtheme
Template: jnews
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ------------------------------------------------------------------------- *
 *  Theme customization starts here
/* ------------------------------------------------------------------------- */
.box-detail h2 b {
    font-size: 36px;
    color: #4a90e2;
    line-height: 24px
}

.box-detail .video {
    display: block;
    overflow: hidden;
    position: relative
}

.box-detail .ready {
    display: block;
    overflow: hidden;
    padding: 10px 0;
    text-align: center
}

.box-detail .ready h2 {
    font-size: 16px;
    line-height: 155%;
    color: #333;
    padding: 10px 0 5px
}

.ready li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 30px;
    position: relative
}

.ready li:last-child:after {
    content: unset
}

.ready li:after {
    content: "";
    position: absolute;
    background: #ddd;
    width: 1px;
    height: 30%;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.ready li h3 {
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    color: #333;
    font-weight: 600;
    padding: 10px 0 0
}

.ready li span {
    display: block;
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
    font-size: 16px;
    line-height: 155%
}

@media (max-width: 500px) {
    .ready li {
        padding:10px 5px;
        width: calc(100% / 3 - 5px);
        position: relative;
        display: inline-block;
        vertical-align: top
    }

    .ready li h2 {
        font-size: 13px;
        line-height: 150%;
        padding: 5px 0;
        color: #333
    }

    .ready li span {
        font-size: 13px;
        line-height: 150%;
        padding: 5px 0 0;
        text-align: center
    }
}

.box-detail {
    display: block;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 8px;
    font-size: 18px;
    line-height: 155%
}

.box-detail:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.box-detail .staple {
    display: block;
    overflow: hidden;
    padding: 10px 0
}

.box-detail h2 {
    display: block;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 155%;
    padding: 14px 16px
}

.staple h2 small {
    font-size: 16px;
    color: #666;
    float: right;
    font-weight: 400;
    position: relative
}

.staple h2 small i {
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    position: absolute;
    left: -20px;
    top: 3px
}

.vaobep-people {
    background-position: -123px -43px
}

[class^="vaobep-"],[class*="vaobep-"] {
    background-image: url(https://cachnaungon.com/wp-content/themes/jnews-child/vaobep.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-size: 206px 92px
}

.staple span {
    display: block;
    overflow: hidden;
    padding: 8px 24px
}

.staple span:before {
    content: "•";
    font-size: 16px;
    margin-right: 4px
}

.box-detail .perform {
    display: block;
    overflow: hidden;
    padding: 20px 20px 5px
}

.box-detail .perform h2,.box-detail .perform h3 {
    display: block;
    overflow: hidden;
    padding: 0;
    font-size: 18px;
    line-height: 155%;
    color: #333;
    font-weight: 600;
    margin-bottom: 10px
}

.box-detail .perform>ul li {
    display: block;
    overflow: hidden;
    padding: 0 5px 10px 20px!important;
    position: relative;
    color: #333;
    font-size: 18px;
    line-height: 155%
}

.box-detail .perform ul li:before {
    content: "●";
    font-size: 10px;
    color: #333;
    margin: 0 3px 4px 10px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -3px;
    top: 1px
}

.infobox {
    display: block;
    overflow: hidden;
    margin: 0 5px 20px 0;
    background: #edf5ff;
    border: 1px solid #0088f2;
    border-radius: 4px;
    padding: 10px 15px 0;
    color: #333
}

.method ul {
    display: block;
    overflow: hidden;
    padding-left: 0
}

.method ul li {
    display: block;
    overflow: hidden;
}

.method li label {
    float: left;
    color: #333;
    background: #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    margin-right: 16px;
    font-size: 16px;
    line-height: 24px
}

.method li .text-method {
    display: block;
    overflow: hidden
}

.method li .text-method h3 {
    display: block;
    overflow: hidden;
    font-weight: 600;
    padding: 5px 0 10px;
    color: #333;
    font-size: 18px;
    line-height: 155%
}

.tipsrecipe {
    background: #f1f7ff;
    border: .5px dashed #4a90e2;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 0 0 30px;
    margin: 0 5px 20px 0;
    position: relative
}

.tipsrecipe .vaobep-machban {
    width: 15px
}

.tipsrecipe>p {
    margin-bottom: 10px;
    display: inline-block
}

.tipsrecipe>ul li {
    position: relative;
    padding: 0 5px 10px 20px!important
}

.tipsrecipe>ul li:before {
    content: "●";
    font-size: 12px;
    color: #333;
    margin: 0 3px 4px 10px;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -3px;
    top: 1px
}

.vaobep-machban {
    background-position: -136px -11px;
    width: 15px;
    height: 20px;
    margin: -3px 5px 0 0!important
}

.method li .text-method .box-gallery {
    margin-top: -10px;
}

.method li .text-method .img-method.fouritem {
    width: calc(50% - 5px);
    margin: 2.5px 5px 2.5px 0;
    float: left;
}

.method li .text-method .img-method.twoitem {
    width: calc(50% - 5px);
    margin-right: 5px;
    float: left;
}

.method li .text-method .img-method.threeitem {
    width: calc(50% - 5px);
    margin-right: 5px;
    float: left;
}

.method li .text-method .img-method.oneitem {
    width: calc(100% - 5px);
    min-width: 300px;
}

.method li .firstItem.oneitem.img-method img, .method li .firstItem.threeitem.img-method img
 {
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
}

.method li .text-method .img-method.threeitem.firstItem
 {
    width: calc(100% - 5px);
    margin: 0 0 5px 0;
}

.method li .text-method .img-method {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    cursor: pointer;
    border-radius: 4px;
}

.method li .img-method img {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    width: 354px;
    height: 354px;
    object-fit: cover;
}


@media screen and (max-width: 768px) {
    .method li .img-method img {
        width: 172px;
        height: 172px;
    }
}