/*
Theme Name: Ratio Group
Description: Toi la Qui Nguyen da xay dung - thiet ke va lap trinh cho Ratio Group nam 2023
Author: Design by Qui Nguyen
Template: Qui Nguyen
Version: 1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*@font-face{font-family:'brandon_text';src:url(./fonts/brandontext-bold-webfont.ttf) format('truetype');font-weight:bold;font-style:normal}
@font-face{font-family:'brandon_text';src:url(./fonts/brandontext-regular-webfont.ttf) format('truetype');font-weight:normal;font-style:normal;}*/

/*body{font-family:  "Custom Font Name",  sans-serif}
.nav > li > a {font-family:  "Custom Font Name", sans-serif;}
h1,h2,h3,h4,h5,h6, .heading-font{font-family: "Custom Font Name", sans-serif;}
.alt-font{font-family: "Custom font name", sans-serif;}*/
/*
a,p,h1, h2, h3, h4, h5, h6,span.widget-title,li{font-family: "brandon_text" !important;}
.stars a{font-family:'fl-icons'!important}
body {
    overflow: hidden;
}


.header-main .nav > li.menu-item > a {
    font-size: 14px;
    color: #2b2b2b;
    padding: 15px 20px;
}
.header-main .nav > li.menu-item {
    margin: 0;
}
*/
@font-face{font-family:'brandon_text';src:url(./fonts/calson.ttf) format('truetype');font-weight:normal;font-style:normal;}

.hotline_email{
    display: flex;
    font-size: 14px;
    gap: 30px;
}   
.hotline_email span {
    font-size: 12px;
    color: #cc4f53;
}

.home_about {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.home_banner_video {
    background: #efefef;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.home_about h1 {
    font-family: calson;
    font-size: 70px;
    font-weight: normal;
    margin: 0;
    line-height: 1;
    letter-spacing: 5px;
}
.home_about h2 {
    font-size: 18px;
    text-transform: uppercase;
    font-family: arimo;
    font-weight: 500;
    top: 0;
    margin-left: 0px;
}
.home_about a.button.primary {
    padding: 0 60px;
}
.home_about a.button.primary:after {
    content: "\f178";
    position: relative;
    font-family: "Font awesome 5 pro";
    font-weight: 500;
}
.home_about .video-button-wrapper i:before {
    content: "";
    background: url(/wp-content/themes/flatsome-child/images/i_play.png);
    width: 65px;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.home_about .video-button-wrapper a {
    background: transparent;
    border: none;
    font-size: 0;
}

.home_banner_video .col-inner {
    padding: 30px;
    z-index: 0;
    position: relative;
}
.home_banner_video .col-inner .banner {
    border: 6px solid #fff;
    box-shadow: 10px 10px 20px rgb(0 0 0 / 30%);
}
.home_banner_video .col-inner:before {
    content: "";
    position: absolute;
    background: #f4f4f4;
    width: 125px;
    height: 155px;
    bottom: 0;
    left: 0;
}
.home_banner_video .col-inner:after {
    content: "";
    position: absolute;
    background: #be2327;
    width: 200px;
    height: 280px;
    top: -25px;
    right: 0;
    z-index: -1;
}

.home_lv .box-text {
    position: absolute;
    top: calc(100% - 110px);
    background: rgb(255 0 0 / 50%);
    height: 100%;
    padding: 30px 10px;
    transition: 0.7s;
}
.home_lv .box-text h1 {
    font-size: 26px;
    color: #fff;
    font-weight: 500;
}
.home_lv .box-text p {
    color: #fff;
    font-size: 16px;
    margin: 0;
}
.home_lv .box-text a.button {
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 35px;
    font-weight: 500;
        width: fit-content;
    margin-left: auto !IMPORTANT;
    margin-right: auto !important;
}
.home_lv .box-text .box-text-inner {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
}
.home_lv .box-text p, .home_lv .box-text .button {
    opacity: 0;
}
.home_lv .box {
    overflow: hidden;
}
.home_lv .box-text:before {
    content: "";
    position: absolute;
    background: rgb(255 0 0 / 50%);
    width: 100%;
    height: 30px;
    bottom: 100%;
    clip-path: polygon(100% 0, 0% 100%, 100% 110%);
    left: 0;
}
.home_lv .box:hover .box-text {
    top: 0;
    transition: 0.7s ease;
}
.home_lv .box:hover .box-text p,.home_lv .box:hover .box-text .button{
    opacity: 1;
}
.home_lv {
    padding-bottom: 90px !important;
}

.home_lv h2,.home_duan h2,.home_blog h2 {
    font-size: 35px;
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.home_lv h2:after,.home_duan h2:after,.home_blog h2:after {
    content: "";
    background: url(/wp-content/themes/flatsome-child/images/i_title.png);
    width: 103px;
    height: 91px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 100%;
    top: -40px;
}

.home_duan_slider .box-image {
    border: 10px solid white;
    box-shadow: 0 0 0px 1px #bbb2b3;
    -webkit-mask-image: none;
}
.home_duan_slider .box-image img {
    border-radius: 99%;
    border: 10px solid #bbb2b3;
}
.home_duan_slider .box:hover .box-image {
    box-shadow: 0 0 0px 1px #be2329;
}
.home_duan_slider .box:hover .box-image img {
    border-radius: 99%;
    border: 10px solid #be2329;
}
.home_duan_slider .box-text h3 {
    font-size: 25px;
    line-height: 1.2;
}
.home_duan_slider .box:hover .box-text h3 {
    color: #be2329;
}
.home_duan_slider .box-text p {
    color: #666;
}
.home_duan_slider .flickity-viewport {
    padding: 5px 0;
}
/*//*/
.home_duan .post-item .box-image {
    border: 10px solid white;
    box-shadow: 0 0 0px 1px #bbb2b3;
    -webkit-mask-image: none;
    border-radius: 99%;
    margin-top: 15px;
}
.home_duan .post-item .box-image img {
    border-radius: 99%;
    border: 10px solid #bbb2b3;
}
.home_duan  .post-item .box:hover .box-image {
    box-shadow: 0 0 0px 1px #be2329;
}
.home_duan .post-item .box:hover .box-image img {
    border-radius: 99%;
    border: 10px solid #be2329;
}
.home_duan .post-item .box-text h5.post-title {
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home_duan .post-item .box-text p {
    font-size: 14px;
    color: #666;
}
.home_duan .date_cate {
    display: none;
}
/**/
.form_lh {
    padding: 20px 50px;
    background: #eeeeee;
    margin-left: 35px;
    margin-bottom: 50px;
}
.form_lh:before {
    content: "";
    position: absolute;
    background: #be2327;
    width: 170px;
    height: 245px;
    left: 0;
    z-index: -1;
    top: -30px;
}
.home_form {
    padding-top: 100px !IMPORTANT;
    padding-bottom: 0 !important;
}


.form_lh_title {
    font-size: 30px;
    position: relative;
    width: fit-content;
    margin-bottom: 10px;
}
.form_lh_title:after {
    content: "";
    position: absolute;
    background: #cf2724;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: -5px;
}
.form_lh label {
    font-weight: normal;
    font-style: italic;
}
.form_lh input.wpcf7-form-control {
    box-shadow: none;
    border-radius: 5px;
    line-height: 50px;
    height: auto;
    padding: 0 25px;
}
.form_lh textarea {
    padding: 20px 25px;
    border-radius: 5px;
    resize: none;
}
.form_lh .wpcf7-submit {
    width: 100%;
    text-transform: none;
    font-size: 18px;
    font-weight: normal;
    background: #cf2724 !important;
}

.is-divider {
    display: none;
}
.home_blog:before {
    content: "";
    position: absolute;
    background: url(/wp-content/themes/flatsome-child/images/shape_1.png);
    width: 100%;
    height: 61px;
    background-size: cover;
    bottom: 100%;
    background-repeat: no-repeat;
}
.home_blog {
    margin-top: -70px;
    z-index: 9;
    background: #fff;
}

.home_blog h5.post-title {
    font-size: 28px;
    line-height: 1.2;
}
.home_blog .date_cate {
    margin-top: 10px;
    color: #be2327;
    font-style: italic;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 14px;
}
.home_blog .box.box-vertical .box-text {
    padding: 0 0 0 20px;
}
.home_blog .box.box-vertical .box-text h5.post-title {
    font-size: 18px;
}
.footer_doitac .stack .img {
    margin: 0 15px;
}
.footer_doitac {
    padding-top: 50px !important;
}
.absolute-footer {
    display: none;
}
.footer_all li {
    margin-left: 0 !important;
    list-style: none;
    line-height: 1.2;
    font-size: 15px;
    margin-bottom: 5px;
}
.footer_all .menu li:before {
    content: "\f0da";
    font-family: 'Font Awesome 5 Pro';
    font-weight: bold;
    opacity: 1;
    margin-right: 10px;
}
.footer_all .menu li {
    border: none;
}
.footer_all li i {
    font-family: 'Font Awesome 5 Pro';
}
.blog-archive h5.post-title {
    font-weight: 500;
}
.blog-archive .box-text-inner.blog-post-inner {
    display: flex;
    flex-flow: column;
}
.blog-archive p.from_the_blog_excerpt {
    font-size: 13px;
    order: 2;
}
.blog-archive h1.page-title span {
    background: #be2327;
    color: #fff;
    padding: 15px 50px;
    display: block;
    width: fit-content;
    margin: auto;
    font-weight: normal;
}
ul.page-numbers.nav-pagination {
    text-align: right;
}
ul.page-numbers.nav-pagination a {
    border: 1px solid;
    border-radius: 0;
    font-weight: normal;
}
ul.page-numbers.nav-pagination span {
    border-radius: 0;
    border: 1px solid;
    font-weight: normal;
}
ul.page-numbers.nav-pagination {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;
}
ul.page-numbers.nav-pagination b {
    display: flex;
    flex: 0 1 100%;
    border-top: 4px double #ccc;
    margin-right: 15px;
}

.widget .blog_sidebar {
    padding: 0 !important;
}
.blog_sidebar h2 {
    font-size: 20px;
    font-weight: normal;
    color: #be2327;
    border-bottom: 1px solid #666;
    padding-bottom: 5px;
}
.blog_sidebar h5.post-title {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog_sidebar p.from_the_blog_excerpt {
    font-weight: normal;
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    order: 2;
}
.blog_sidebar .box-text-inner.blog-post-inner {
    display: flex;
    flex-flow: column;
}
.blog_sidebar .date_cate {
    font-size: 13px;
    color: #838282;
}
.blog_sidebar .box-text {
    padding: 0 0 0 15px;
}
.blog_sidebar .box-image {
    width: 40% !IMPORTANT;
}
.blog_sidebar .col.post-item .col-inner {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
}
.blog_sidebar .col.post-item {
    padding-bottom: 15px;
}
.blog_sidebar .col.post-item:last-child .col-inner {
    border: none;
}
.blog_sidebar .section-content>.row>.col {
    padding-bottom: 0;
}

.form_blog {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.form_blog span:nth-child(1) {
    grid-column: 1 /  2;
    grid-row: 1;
}
.form_blog span:nth-child(3) {
    grid-column: 1 /  2;
    grid-row: 2;
}
.form_blog span:nth-child(5) {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.form_blog textarea {
    margin-bottom: 0;
}
.form_blog input.wpcf7-form-control {
    margin-bottom: 0 !important;
}
.single-post .form_lh .wpcf7-submit {
    width: 50%;
    margin: auto;
    display: block;
}
.single-post h1.entry-title {
    color: #cf2724;
    font-size: 26px;
    text-transform: uppercase;
}
.single-post .form_lh {
    margin: 0;
}

.header-main .nav > li > a {
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}
.header-main .nav > li {
    margin: 0 15px;
}
.header-main .nav > li > a i.icon-search {
    font-size: 14px;
}
.header-main .nav > li.active > a:after {
    content: "";
    position: absolute;
    background: #cc4f53;
    width: 100%;
    height: 3px;
    bottom: 0;
}

header.archive-page-header {
    margin-top: 30px;
}
.blog-single .row.row-large {
    margin-top: 30px;
}

/* Tôi là Quí - Nhân viên MKT của công ty Ratio, Viện thẩm mỹ La Ratio. Làm việc tới hôm nay đã được 4 năm 6 tháng. Tôi thấy năng lực và công sức tôi bỏ ra hoàn toàn nhận lại không xứng đáng. Tôi mong muốn sẽ có một phúc lợi và vị trí tốt hơn. Nếu bạn ở lại nhận bàn giao, hy vọng bạn đừng giống như tôi */