/*!
Theme Name: PHtheme
Theme URI: https://chuyenphaidep.info
Author: Phạm Huỳnh
Author URI: https://chuyenphaidep.info
Description: Fast and Secure
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: PH_theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

PHtheme is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/


/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */


/* Document
	 ========================================================================== */


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,200;0,300;0,400;1,200;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@font-face {
    font-family: 'utmneo';
    src: url('assets/font/UTMNeosan/UTM%20Neo%20Sans%20Intel.ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-main: #004c45;
}

* {
    margin: 0;
    padding: 0;
    /* font-family: 'utmneo'; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Be Vietnam Pro', sans-serif;
}

a,
strong,
p,
span,
h1,
h2,
h3,
h4,
h5 {
    /* font-family: utmneo; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Be Vietnam Pro', sans-serif;
}

.kaihabu-title {
    /* font-family: utmneo; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Yeseva One', cursive;
    font-size: 30px!important;
    font-weight: normal;
}

a:hover {
    text-decoration: unset;
}

.menu .buy {
    background: linear-gradient(90deg, #aa823d 0%, #d2c368 51%, #aa823d 100%);
    border: unset;
}

.main-product {
    background-image: url(assets/images/bg1.png);
    width: 100%;
    height: auto;
    background-position: center center;
    background-size: cover;
}

.header a h3 {
    font-size: 30px!important;
}

.start-review .swiper-slide {
    background-color: #C1F4D9;
    padding: 10px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 3px solid #F9DD93;
}


/* width */

::-webkit-scrollbar {
    width: 5px;
}


/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--color-main);
    border-radius: 10px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--color-main);
}

.client-kaihabu {
    padding: 50px 0px;
}

.client-kaihabu h3 {
    font-size: 30px!important;
    font-weight: unset;
    font-family: 'Yeseva One', cursive;
}

.customer-rv {
    margin-top: 50px;
}

.customer-rv .swiper-slide-active img {
    transform: scale(1)!important;
}

.customer-rv .swiper-slide img {
    transform: scale(0.8);
}

.customer-rv .text-zone-rv {
    padding-top: 50px;
}

.customer-rv .text-zone-rv {
    position: relative;
    color: var(--color-main);
}

.customer-rv .text-zone-rv::before {
    content: "";
    background-image: url('assets/images/icon-note.png');
    width: 24px;
    height: 18px;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 20px;
}

.view-more {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
}

.view-more a {
    border: 2px solid var(--color-main);
    padding: 10px 30px;
    border-radius: 50px;
    text-transform: uppercase;
    color: var(--color-main);
    font-weight: bold;
}

.view-more a i {
    color: #e2b668;
    font-size: 20px;
}

.view-more a:hover {
    background-color: var(--color-main);
    color: #fff;
    text-decoration: none;
}

.body-news {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #ccc;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.body-news ul.list-news li {
    position: relative;
}

.body-news ul.list-news li::after {
    content: " ";
    background-color: #ccc;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}

ul.sub-menu::before {
    content: "";
    width: 100%;
    height: 215px;
    background-image: url("assets/images/img_menu.png");
    position: absolute;
    bottom: 0;
    right: -48px;
    background-repeat: no-repeat;
    z-index: -1;
}

li.buy a {
    color: var(--color-main)!important;
    font-weight: bold;
}

.title-pro {
    border-bottom: 1px solid var(--color-main)!important;
    padding-bottom: 10px;
    position: relative;
    font-size: 20px;
}

.title-pro::after {
    content: " ";
    position: absolute;
    background: #008652;
    background: -webkit-gradient(linear, left right, left right, from(#008652), to(#04544E));
    background: linear-gradient(90deg, #008652 0%, #04544E 100%);
    width: 100px;
    height: 5px;
    bottom: -3px;
    left: 0px;
}

.content-ads {
    background-image: url('assets/images/bg1.png');
    background-repeat: repeat-y;
    padding: 30px 0px;
}

span.line-kaihabu {
    width: 300px;
    height: 2px;
    background-color: #D29637;
    display: block;
    margin: auto;
    position: relative;
    margin-top: 20px;
}


/* span.line-kaihabu-left {
    margin-left: 0px!important;
} */

span.line-kaihabu::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: #D29637;
    border-radius: 50%;
    right: 0;
    top: -4px;
}

span.line-kaihabu::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: #D29637;
    border-radius: 50%;
    left: 0;
    top: -4px;
}

.main-product a.link-pro:hover {
    text-decoration: none;
}

.main-product a.link-pro:hover h3 {
    font-weight: bold!important;
}

.text-h2 {
    background-color: #C7F9F4;
    padding: 40px 60px;
    margin-bottom: 20px;
}

.text-h2 h2 {
    color: var(--color-main)!important;
    position: relative;
    text-align: justify;
}

.text-h2 h2::before {
    content: "";
    background-image: url(assets/images/before.png);
    width: 28px;
    height: 21px;
    background-size: cover;
    object-fit: contain;
    position: absolute;
    left: -40px;
}

.text-h2 h2::after {
    content: "";
    background-image: url(assets/images/after.png);
    width: 28px;
    height: 21px;
    background-size: cover;
    position: absolute;
    right: -40px;
}

.text1-content {
    border: 2px solid #F9DD93!important;
    background-color: #FFFF;
    padding: 40px;
    margin-bottom: 40px;
}

.text1-content p {
    font-size: 16px!important;
    margin-top: 20px;
    color: var(--color-main);
}

.text-2 {
    background-image: url(assets/images/bgdetail.png);
    background-position: center center;
    padding: 50px 0px;
}

.text-3 {
    background-color: #fff;
    padding: 40px 0px;
}

.text2-content {
    margin: 30px 0px;
}

.text2-content p {
    margin-top: 20px;
}

.list-video {
    margin-top: 30px;
    text-align: center;
}

.list-video .item-video-pro img {
    max-width: 70%;
    width: 100%;
}

.list-video .item-video-pro {
    margin-bottom: 20px;
}

.noti p {
    font-style: italic;
    color: red;
    font-size: 16px;
}

.promo-kaihabu {
    background-image: url('assets/images/bg2.png');
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    margin: 20px 0px;
}

.promo-kaihabu p {
    font-size: 20px;
    text-transform: uppercase;
    color: #F9DD93!important;
    font-weight: bold;
}

.promo-kaihabu p span#num_price {
    background-color: #008652;
    padding: 10px;
    border-radius: 20px;
    font-style: normal;
}

.promo-kaihabu span {
    color: #fff;
    font-style: italic;
}

.button-cta {
    margin-top: 20px;
}

.button-cta .btn-call-ctr {
    background: linear-gradient(90deg, #aa823d 0%, #d2c368 51%, #aa823d 100%);
    padding: 10px 30px;
    color: #fff;
    font-size: 20px;
    border: 1px solid #fff;
    font-weight: bold;
    margin-right: 20px;
    border-radius: 5px;
}

.button-cta .btn-buy-ctr {
    background: linear-gradient(90deg, #aa823d 0%, #d2c368 51%, #aa823d 100%);
    padding: 10px 30px;
    color: #fff;
    font-size: 20px;
    border: 1px solid #fff;
    font-weight: bold;
    border-radius: 5px;
}

.button-cta a:hover {
    text-decoration: none;
}

.article-content-success {
    padding: 40px 0px;
}

.article-content-success h2 {
    font-family: 'Yeseva One', cursive;
    font-size: 30px!important;
    color: var(--color-main);
}

.kaihabu-title-sidebar {
    font-family: 'Yeseva One', cursive;
    font-size: 18px!important;
    color: var(--color-main);
}

.contact ul li a {
    color: var(--color-main)!important;
}

.contact span i {
    color: var(--color-main)!important;
}

.header img {
    width: 35px!important;
}

.customer-rvsb .swiper-slide {
    padding: 20px;
}

.customer-rvsb .swiper-slide p.name {
    font-weight: bold;
    font-family: 'Yeseva One', cursive;
    margin-top: 20px;
}

.item-pro-shop {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    margin-top: 40px;
    padding: 40px;
}

.item-pro-shop .img {
    min-height: 300px;
}

.item-pro-shop a h3 {
    font-family: 'Yeseva One', cursive;
    font-size: 24px!important;
}

.article-content-pro a.btn-buy {
    background: linear-gradient(90deg, #aa823d 0%, #d2c368 51%, #aa823d 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
}

.article-content-pro a.btn-buy:hover {
    text-decoration: none;
    color: var(--color-main)!important;
}

@media screen and ( max-width: 768px) {
    .menu {
        padding-top: 10px;
    }
    .banner-6 .form-contact {
        margin-top: 20px;
    }
    .subcribe .input-group {
        width: 100%!important;
    }
    .btn-show-menu {
        right: 10px;
        border: 2px solid #F9DD93!important;
        padding: 5px 10px!important;
    }
    a.navbar-brand {
        margin-left: 0px!important;
    }
    a.navbar-brand img {
        width: 100%;
        max-width: 120px;
    }
    .contact {
        display: none!important;
    }
    .kaihabu-title {
        font-size: 20px!important;
    }
    .client-kaihabu h3 {
        font-size: 20px!important;
    }
    .promo-kaihabu p {
        font-size: 12px!important;
    }
    .promo-kaihabu span {
        font-size: 11px;
    }
    .button-cta .btn-call-ctr {
        margin: 0 0 10px 0;
        width: 100%;
    }
    .button-cta {
        display: grid;
    }
    button.btn-show-menu {
        background-color: #058874!important;
        border-radius: 8px;
    }
    .row-mb {
        display: flex;
        flex-direction: column-reverse;
    }
    .banner-2 .img-pro {
        max-width: 70%;
    }
    footer {
        background-color: #004c45;
        background-image: unset!important;
        background-position-x: -400px;
        position: relative;
    }
    footer::after {
        content: "";
        width: 100%;
        height: 450px;
        background-image: url('assets/images/bgft.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0px;
        background-position-x: -334px;
    }
    footer .after {
        height: auto!important;
    }
    footer .after .sdk {
        text-align: center!important;
        font-size: 10px;
        display: contents;
    }
    footer .after .note {
        text-align: center!important;
        font-size: 9px;
        display: none;
    }
    ul.sub-menu::before {
        content: unset;
    }
    .main-product {
        background-size: contain;
    }
}

.img-zone img {
    width: 100%;
}