/*!
Theme Name: saota
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: saota
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.

saota is based on Underscores https://underscores.me/, (C) 2012-2020 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:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Toàn bộ form full width, không chia cột */
.wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/* Label in đậm */
.wpcf7 form label {
  font-weight: 600;
  display: block;
  color: #222;
}

/* Input, select, textarea style */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  border: 1px solid #ccc !important;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 15px;
  background-color: #fff;
  color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Hiển thị rõ viền select */
.wpcf7 select {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Hiệu ứng focus */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* Submit button */
.wpcf7 input[type="submit"] {
  background-color: #000;
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: fit-content;
  align-self: flex-start;
  transition: background-color 0.3s;
}

.wpcf7 input[type="submit"]:hover {
  background-color: #333;
}

.navigation.pagination {
    text-align: center;
    margin: 50px 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navigation.pagination .nav-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navigation.pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.navigation.pagination .page-numbers:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.navigation.pagination .page-numbers.current {
    background-color: #252525;
    color: #fff;
    border-color: #252525;
    font-weight: 600;
}

.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
    font-weight: bold;
    padding: 8px 16px;
}

.navigation.pagination .page-numbers.prev:hover,
.navigation.pagination .page-numbers.next:hover {
    background-color: #111;
    color: #fff;
}

#footerNewsletter .wpcf7-spinner,
#mobileNewsletter .wpcf7-spinner {
    display: none;
}

#footerNewsletter .wpcf7-form input[type="email"],
#mobileNewsletter .wpcf7-form input[type="email"] {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #000;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background-color: #000;
    color: #fff;
    outline: none;
    box-sizing: border-box;
}

#footerNewsletter .wpcf7-form input[type="submit"],
#mobileNewsletter .wpcf7-form input[type="submit"] {
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #000;
    border-left: none;
    border-radius: 0 4px 4px 0;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center; 
    justify-content: center;
    transition: background-color 0.3s;
}

#footerNewsletter .wpcf7-form input[type="submit"]:hover,
#mobileNewsletter .wpcf7-form input[type="submit"]:hover {
    background-color: #333;
}

#footerNewsletter .wpcf7-form input[type="email"]:hover,
#mobileNewsletter .wpcf7-form input[type="email"]:hover {
    background-color: #111;
}

/*@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat.woff2") format("woff2"),
       url("./assets/fonts/Montserrat.woff") format("woff");
  font-weight: 100 700;
  font-style: normal;
}
*/


#button-contact-vr {
    position: fixed;
    top: 16%;
    right: 10px;
    z-index: 9999
}

#icon-khuyenmai {
    position: fixed;
    bottom: 5%;
    z-index: 1003;
    right: 0;
}
#icon-khuyenmai div {
    margin-bottom: 10px;
    position: relative;
}

.messenger_icon_number {
    position: absolute;
    bottom: 65px;
    right: -30px;
    background: red;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    border-radius: 50%;
    line-height: 1;
    width: 24px;
}

#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
    transition: 1s all;
    -moz-transition: 1s all;
    -webkit-transition: 1s all
}

#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: #fff0;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block
}

.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: -8px;
    position: absolute;
    box-shadow: 0 0 0 0 #74eb74;
    background-color: rgb(201 38 45 / 59%);
    border-radius: 50%;
    border: 2px solid #fff0;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite
}

.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: -50px;
    right: -4px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out
}

.phone-vr-img-circle a {
    display: block;
    line-height: 37px
}

.phone-vr-img-circle img {
    max-height: 45px;
    max-width: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%)
}

@-webkit-keyframes phone-vr-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px #fff0
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 #fff0
    }
}

@keyframes zoom {
    0% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px #fff0
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 #fff0
    }
}

.double-call.active {
    position: fixed;
    display: block!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999999
}

#callto_ovl {
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0,60%)
}

#callto_wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 0 10px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%)
}

#callto_wrap a,#callto_wrap span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    background: #fff;
    border-radius: 10px;
    margin-top: 5px;
    color: #2196f3;
    font-size: 18px;
    font-weight: 400;
    border: 1px solid #767676
}

#callto_wrap span {
    background: #c11111;
    border-color: #ff9b9b;
    color: #fff
}


.widget-area li a {
    text-transform: uppercase;
}



.list-social-topbar {
    position: fixed;
    right: 0;
    z-index: 99;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.list-social-topbar ul {
    padding-top: 10px;
    padding-bottom: 10px;
    list-style: none;
    -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px 0 0 5px;
    margin: 0;
    padding-left: 0px;
}

.list-social-topbar ul li + li {
    margin-top: -1px;
}

.list-social-topbar ul li a {
    width: 40px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    -webkit-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    -webkit-animation: animation-topbar 1s 1s ease-in-out both;
    animation: animation-topbar 1s 1s ease-in-out both;
}

.list-social-topbar ul > li > a > img {
    width: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.elementor-13 .elementor-element.elementor-element-734902b {
    --container-widget-flex-grow: 0 !important;
}

#clear-filters {
    position: relative;
    top: 11px;
    cursor:pointer;
    background:rgb(62 84 111);
    color:#fff;
    padding:5px 10px;
    border-radius:4px;
}