/*
Theme Name: hwp-INOX
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button{margin-top: 0}

.col, .columns, .gallery-item{padding-bottom: 15px}
.nav-dots-small .flickity-page-dots .dot, .flickity-page-dots .dot{width: 8px; height: 8px}
.flickity-slider>.row:not(.is-selected){opacity: 1}
.wpcf7-form  .wpcf7-form-control{border-radius: 5px; box-shadow: none}
.wpcf7-submit {margin: 0}
.wpcf7-spinner{position: absolute}
.page #content ul{padding-left: 30px}
.page #content ul.nav{padding-left: 0}
.hwp-breadcrumb h1{font-size: 30px}
.page-template-default #main, .category #main {padding-top: 30px}
.archive.woocommerce-shop #main{padding-top: 0}
.archive.woocommerce-shop h1{margin-bottom: 0}
.single #main{padding-top: 20px}
.single #main .rank-math-breadcrumb p{margin-bottom: 0}
.blog-archive{padding-top: 0}
.html_topbar_left #flags{width: auto; padding-top: 7px}
.row-slider .flickity-page-dots{position: static}
.hwp-tt .flickity-prev-next-button{bottom: 50%; top: 6%}
.block_list_video .col-inner h4{font-size: 1em}

.nav-pagination>li>a, .nav-pagination>li>span{border-radius: 3px; border: 1px solid #ededed}
.term-description{padding-top: 30px; margin-bottom: 20px}

.widget .menu > li{padding-left: 15px; position: relative}
.widget .menu > li:before{content: '';    width: 0px;height: 0px;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 6px solid #000; position: absolute; left: 0; top: 13px}

.widget .menu > li ul{border-left-width: 0}
/*HomePage*/
.txt-box{display:inline-block; width: 120px; height: 120px;  border-radius: 50%; border: 2px solid #fd2a3d; position: relative}
.txt-box strong{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%}

.hwp-img-circle .box-image{padding: 20px; border: 2px solid #ededed;  position: relative}
.hwp-img-circle .box-text:before{content: ''; width: 2px; height: 20px; background: #ededed; position: absolute; left: 50%; transform: translateX(-50%); top: 0}
.hwp-img-circle .box-image .image-cover{border-radius: 50%}

#load-more-events, .page_clickLoad_video{border-radius: 30px; cursor: pointer; padding: 5px 30px 3px}
.block_list_video .col{display: none}
.block_list_video .col .banner {border-radius: 10px; cursor: pointer}

.hwp-tabs-tv .tab{margin: 5px}
.hwp-tabs-tv .tab a{min-width: 135px; text-align: center; display: block; border-width: 0; background-color: #f9f7f7; font-size: 20px; letter-spacing: 0; color: #222}
.hwp-tabs-tv .tab.active a, .hwp-tabs-tv .tab a:hover{background-color: var(--fs-color-primary); color: #fff}

.hwp-dv-slide .flickity-page-dots{bottom: -30px}


/*POST*/
.blog-post-inner .from_the_blog_excerpt{margin-top: 15px}
.tp-post-meta{font-size: 14px; color: #666}
.tp-post-meta .posted-on{margin-right: 15px}
.single .entry-header-text{border-bottom: 1px solid #eaeaea; padding-bottom: 10px; margin-bottom: 20px}
.single-page iframe{width: 100%;max-width: 1200px;aspect-ratio: 16/9;height: auto;border: 0;display: block;margin: 0 auto;}

.hwp-dv .post-item .box-text{text-align: center; background-color: #ed1c24; padding: 10px; margin-bottom: 10px}
.hwp-dv .post-item .box-text a, .product-small .box-text a{color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 500}
.hwp-dv .post-item .box-text a:hover, .product-small .box-text a:hover{color: #eebc49}
.taxonomy-description ul, .taxonomy-description ol, .term-description ul, .term-description ol{padding-left: 35px}

.single-page ul{padding-left: 20px}
.hwp-meta-list{display: table; width: 100%; border: 1px solid #E8E8E8; margin-bottom: 10px}
.hwp-meta-list>div{display: table-cell; vertical-align: middle;}
.hwp-meta-icon{width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff}
.hwp-meta-icon.hwp-meta-icon-tags{background-color: #1b1b1b}
.hwp-meta-icon.hwp-meta-icon-share{background-color: #ed1c24}
.hwp-meta-desc {padding-left: 20px; padding-right: 10px; color: #8D8D8D}
.hwp-single-tags{font-size: 12px; font-style: italic; color: #8D8D8D;}
.hwp-single-tags a{ margin-right: 10px; color: #8D8D8D; }
.hwp-single-tags a:hover, .product-info .product_meta a, .hwp-related-control span:hover{color: #ed1c24}
.hwp-single-share.hwp-meta-desc{padding-left: 8px}
.hwp-single-share .share-icons a{margin-bottom:0; border:0; min-width:0; width: 33px; height: 30px; line-height: 33px; display: inline-block;}
.hwp-single-share .share-icons a i{top: 0}
.hwp-datetime{font-size: 13px; color: #666}
.woocommerce-tabs .product-tabs a{font-size: 16px}
.post-title a{overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;}
.from_the_blog_excerpt  {overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;}

.hwp-related-title{position: relative}
.hwp-related-post{margin-top: 50px}
.hwp-related-title p{font-size: 30px; font-weight: bold; margin-bottom: 20px}
.hwp-related-control{position: absolute; right: 5px; top: 0; text-align: center;}
.hwp-related-control span{display: inline-block; height: 40px; width: 40px; line-height: 40px;  border-radius: 50%; border: 1px solid #E2EFFF; box-shadow: 0 3px 6px rgba(0,0,0, 0.16); cursor: pointer}


.widget-area aside{border: 1px solid #ccc; padding:50px 20px 10px 20px; position: relative}
.widget .widget-title{position: absolute; top: 0; left: 0; width: 100%;display: block; text-align: center; text-transform: uppercase; color: #fff; background-color: #ed1c24; padding: 12px 10px} 
.widget-area aside .is-divider{display: none}


.product-info h1.product-title{margin-bottom: 20px}
.product-small .box-text{background-color:#ed1c24; padding: 10px}
.woocommerce-pagination{margin: 20px 0 40px}

/*POPUP*/
.event-item{cursor: pointer;}
.event-item img{transition: all 0.5s}
.event-item:hover img{transform: scale(1.1); transition: all 0.3s}
.event-item h3{font-size: 20px; margin-top: 10px; line-height: 1.3em}
.hwp-popup {position: fixed;inset: 0;background: rgba(0,0,0,0.8);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.popup.hidden { display: none; }
.popup-content {width: 95%;max-width: 900px;background: #fff;position: relative;}
.popup-close {position: absolute;top: -43px; right: 0px;font-size: 35px; color: #ed1c24;cursor: pointer; z-index: 99999}
.hwp-popup .swiper-button-next:after, .hwp-popup .swiper-button-prev:after{font-size: 30px; color: #fff; font-weight: bold}


/*FOOTER*/
.ft-danhmuc .menu-item a{position: relative; padding-left: 25px}
.ft-danhmuc .menu-item a:before{content: ''; font-family: "FontAwesome"; position: absolute; top: 9px; left: 0;
    content: "\f0a9"; font-size: 12px; color: #eebc49}
.menu-item a:hover{color: #eebc49 !important}


@media only screen and (min-width: 850px){
    .nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a{font-size: 0.95em; font-weight: normal; color: inherit;}
.nav-dropdown>li.nav-dropdown-col{display:block; position: relative}
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown-col>ul li:hover>a{color:white}
.nav-dropdown-default>li:hover{background:#fbae3c}
/*.nav-dropdown-default>li>a{border-bottom:0 !important}.nav-dropdown-has-arrow li.has-dropdown:before{border-width: 10px;
    margin-left: -10px;}*/
.nav-dropdown .nav-dropdown-col>ul{margin-top:-40px;box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);display:none;position: absolute;
    left: 100%;z-index: 9;background: #fff;min-width: 240px;}
.nav-dropdown>li.nav-dropdown-col{width:100%;border-right:0}
.nav-dropdown .nav-dropdown-col>ul li a{padding:10px 15px;  text-transform: none;}
.header-nav li.nav-dropdown-col:hover >ul{display:block !important}
.active>ul.children, .active>ul.sub-menu:not(.nav-dropdown) {display: none !important;}
    
    .hwp-breadcrumb h1{text-align: left}
    .me-bread{text-align: right}
    .hwp-popup .swiper-button-next{right: -30px}
    .hwp-popup .swiper-button-prev{left: -30px}
    .hwp-img-circle .box-text{padding: 0 20px}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.box-blog-post .post-title a{font-size: 1rem}
.hwp-related-title p{font-size: 25px}
.hwp-dv .post-item .box-text a, .product-small .box-text a{font-size: 16px}
}

@media only screen and (max-width: 549px){
    .hwp-tt .flickity-prev-next-button{top: 8%}
}