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

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


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

:root{
    --pink: #F1809E;
    --black: #35252F;
    --white: #fff;
    --red: #B11F24;
}

@font-face {
  font-family: 'UTM Cooper Black';
  src: url('/wp-content/themes/flatsome-child/assets/font/UTM%20Cooper%20Black.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'UTM Cooper Black';
  src: url('/wp-content/themes/flatsome-child/assets/font/UTM%20Cooper%20BlackItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

body {
  font-family: 'Montserrat', sans-serif !important;
}

h1{
    font-size: 58px !important;
}

h2{
    font-size: 46px !important;
}

h3{
    font-size: 38px !important;
}

h1, h2, h3 {
  font-family: 'UTM Cooper Black', sans-serif !important;
}

h4{
    font-family: 'Montserrat', sans-serif !important;
}
.container{
    max-width: 1200px;
}

/******************** HEADER **********************/
.header-top{
    background-color: var(--pink);
}
.header-top .address-header a,
.header-top .phone-header a{
    color: var(--white);
    font-size: 16px;
    position: relative;
}
.header-top .address-header a{
    margin-left: 30px;
}
.header-top .address-header a::before{
    content: '';
    position: absolute;
    background-image: url(/wp-content/uploads/2025/05/icon-location.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 18px;
    height: 20px;
    left: -25px;
    bottom: 0;
}
.header-top .phone-header a::before{
    content: '';
    position: absolute;
    background-image: url(/wp-content/uploads/2025/05/icon-phone.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 18px;
    height: 20px;
    left: -25px;
    bottom: 0;
}
.custom-search-box {
  position: relative;
  width: 150px;
}

.custom-search-box input[type="search"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  padding-left: 25px;
  color: white;
  box-shadow: unset;
}

.custom-search-box input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.custom-search-box::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: white;
}
.stuck .header-main .menu-item a{
    color: var(--black) !important;
    font-weight: 600;
}
.header-main .menu-item a{
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    text-transform: math-auto;
}
.header-nav .current-menu-item a,
.stuck .header-main .current-menu-item a{
    color: var(--red) !important;
    font-weight: bold;
}

body.home .stuck .custom-search-box input[type="search"],
.custom-search-box input[type="search"] {
  color: var(--black) !important;
  border-bottom: 1px solid var(--black) !important;
}

.custom-search-box::before,
body.home .stuck .custom-search-box::before {
  color: var(--black);
}

body.home .custom-search-box input[type="search"] {
  color: white !important;
  border-bottom: 1px solid white !important;
}

body.home .custom-search-box::before {
  color: white;
}


/*Language*/
.lang-select-wrapper {
  position: relative;
  display: inline-block;
  font-family: sans-serif;
  user-select: none;
  cursor: pointer;
  z-index: 999999;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  touch-action: manipulation;
  cursor: pointer;
}

.lang-trigger img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.lang-label {
  font-size: 14px;
  font-weight: bold;
}

.stuck .lang-caret,
.lang-caret{
    color: var(--black);
    font-size: 10px;
    margin-left: 4px;
}
body.home .lang-caret {
  color: var(--white);
}

.lang-options {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 6px;
  margin-top: 6px;
  min-width: 140px;
  display: none;
  flex-direction: column;
  z-index: 999;
}

.lang-options.active {
  display: flex;
}

.lang-options li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  line-height: 1.5;
  min-height: 32px;
  box-sizing: border-box;
}

.lang-options li:hover {
  background-color: #f0f0f0;
}

.lang-options li img {
  display: block;
  width: 24px;
  height: 16px;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  flex-shrink: 0;
}

.lang-options li span {
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  color: #333;
}

/* Mobile position */
body.mobile-nav-active .lang-select-wrapper {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 999999;
}






/* BREADCRUMB */
.breadcrumb {
  font-size: 20px;
  color: white;
}

.breadcrumb a {
  color: var(--white);
  text-decoration: none;
}

.breadcrumb .current {
  color: var(--pink);
  font-weight: bold;
}
.custom-breadcrumb{
    margin: 0 15px;
    padding-bottom: 30px;
}
.custom-breadcrumb a,
.custom-breadcrumb .breadcrumb{
    color: #6C7880;
    font-size: 18px;
}
.custom-breadcrumb .breadcrumb .current{
    color: #B11F24;
}

/* PHÂN TRANG */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding-left: 0;
}
.pagination ul{
    margin: unset;
}
.pagination li {
  display: inline-block;
}

.pagination li a,
.pagination li span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  border: 1px solid #000;
  border-radius: 8px;
  text-decoration: none;
  color: #000;
  transition: all 0.3s ease;
}

.pagination li a:hover {
  background-color: #000;
  color: #fff;
}

.pagination li .current,
.pagination li.current {
  background-color: #000;
  color: #fff;
  border-color: #000;
  font-weight: bold;
  border-radius: 8px;
}
.pagination li.current span{
    color: #fff;
}


/* FOOTER */
.custom-captcha{
	padding-bottom: 15px;
}

.custom-contact-blog .custom-captcha{
	padding-top: 15px;
}

.footer-wrapper{
    border-top: 1px solid var(--black);
}
.row-footer .col-left{
    display: flex;
    align-items: center;
}
.row-footer .col-middle{
    border-left: 1px solid var(--black);
    border-right: 1px solid var(--black);
}
.row-footer .col-middle2{
    border-right: 1px solid var(--black);  
}
.row-footer .col-middle h4,
.row-footer .col-middle2 h4,
.row-footer .col-right h4{
    color: #B11F24;
    border-bottom: 1px solid var(--black);
    padding-top: 15px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px;
}
.row-footer .title{
    color: #808080;
    margin-bottom: unset;
}
.row-footer .col p a,
.row-footer .col-middle2 span{
    color: var(--black);
}
.row-footer .col-middle2 a,
.row-footer .col-middle2 a:hover{
    border: unset;
    color: var(--white);
}
.absolute-footer{
    background-color: var(--pink);
    padding: 10px;
}
.absolute-footer .copyright-footer{
    color: var(--white);
}
.absolute-footer .container{
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
    h1{
        font-size: 48px !important;
    }
    
    h2{
        font-size: 36px !important;
    }
    
    h3{
        font-size: 32px !important;
    }
    .mobile-sidebar .html_nav_position_text_top{
        display: flex;
        justify-content: center;
    }
    .mobile-sidebar .html_nav_position_text_top img{
        width: 100%;
        height: 150px;
    }
    .row-footer .col-left{
        border-bottom: 1px solid var(--black);
        justify-content: center;
        text-align: center;
        padding-bottom: unset;
    }
    /*body.home .mobile-sidebar .custom-search-box input[type="search"]{*/
    /*    color: var(--black) !important;*/
    /*    border-bottom: 1px solid var(--black) !important;*/
    /*}*/
    /*body.home .mobile-sidebar .custom-search-box::before{*/
    /*    color: var(--black);*/
    /*}*/
    /*.custom-search-box{*/
    /*    width: 200px;*/
    /*}*/
    .mobile-sidebar .nav-vertical li>a{
        color: var(--black);
        font-size: 16px;
        text-transform: math-auto;
    }
    .mobile-sidebar .nav-sidebar.nav-vertical>li+li{
        border-top: 1px solid #C4C0C0;
    }
    .mobile-sidebar .header-search-form{
        border-top: unset !important;
    }
    .mobile-sidebar .ux-search-submit{
        background-color: var(--pink);
    }
    .html_nav_position_text_top{
        padding-bottom: unset !important;
    }
    .mobile-sidebar .header-block{
        padding-left: 15px;
        padding-top: 15px;
    }
    .mobile-sidebar .header-block .language-mobile img{
        width: 40px;
        height: auto;
        margin: 0 5px;
        object-fit: cover;
    }
}

@media only screen and (max-width: 767px){
    h1{
        font-size: 38px !important;
    }
    
    h2{
        font-size: 32px !important;
    }
    
    h3{
        font-size: 28px !important;
    }
    .header-top .address-header a, 
    .header-top .phone-header a{
        font-size: 14px !important;
    }
    .header-top .address-header a::before{
        top: 0;
        bottom: unset;
    }
    .row-footer .col-left{
        padding-bottom: unset;
    }
    .breadcrumb{
        font-size: 18px;
    }
    .mobile-sidebar .html_nav_position_text_top{
        display: flex;
        justify-content: center;
    }
    .mobile-sidebar .html_nav_position_text_top img{
        width: 100%;
        height: 135px;
    }
    .mobile-sidebar .nav-vertical li>a{
        color: var(--black);
        font-size: 14px;
        text-transform: math-auto;
    }
    .mobile-sidebar .nav-sidebar.nav-vertical>li+li{
        border-top: 1px solid #C4C0C0;
    }
    .mobile-sidebar .header-search-form{
        border-top: unset !important;
    }
    .mobile-sidebar .ux-search-submit{
        background-color: var(--pink);
    }
    .html_nav_position_text_top{
        padding-bottom: unset !important;
    }
    .mobile-sidebar .header-block{
        padding-left: 15px;
        padding-top: 15px;
    }
    .mobile-sidebar .header-block .language-mobile img{
        width: 40px;
        height: auto;
        margin: 0 5px;
        object-fit: cover;
    }
}