/*
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  ***************/
}

* {
	box-sizing: border-box
}
body,
.nav > li > a,
h1,h2,h3,h4,h5,span,p,strong,a,ul,li{
	font-family: "Roboto", sans-serif !important;
}

:root{
	--green: #0aab61;
  --black: #0A0A0A;
}
p{
	font-size: 16px;
}

/* HEADER  */
div#masthead {
    background-color: var(--green);
}
.header-bottom .nav > li > a{
	font-size: 16px !important;
}
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #dfe8eb;
  width: 30%;
  height: 400px;
  border-radius: 10px 0 0 10px;
}
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 90%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  margin: 5%;
  border-radius: 4px;
}
.tab button:hover {
  background-color: #bee9f7;
}
.tab button.active {
  background-color: #6398a8;
}
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 400px;
  border-radius: 0 10px 10px 0;
}
.header-button .icon-shopping-cart:after{
  background-color: #fa8c16;
  min-width: 18px;
}
.header-nav .cart-item .nav-dropdown{
  padding: 15px;
}
.header-nav .woocommerce-mini-cart{
  border: unset !important;
}
.header-nav .woocommerce-mini-cart-item a{
  background-color: unset !important;
}

/* HEADER MOBILE */
li.html.custom.html_nav_position_text {
    padding: 10px;
    background-color: var(--green);
}

/* CSS tăng giảm số lượng */
/*
.sp-loop-cart{
  margin-top: 10px;
  text-align:center;
}
.sp-qty-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}
.sp-qty{
  width:55px !important;
  text-align:center;
  height:36px;
}
.sp-qty-btn{
  width:36px;
  height:36px;
  border:1px solid #ddd;
  background:#f5f5f5;
  cursor:pointer;
  font-size:18px;
  border-radius:6px;
}
.sp-loop-add{
  width:100%;
  border-radius:999px;
}
*/
/* Ẩn header/menu khi chưa đăng nhập */
/* body:not(.logged-in) header,
body:not(.logged-in) .header-wrapper,
body:not(.logged-in) #header  */

#menu-item-242,
#menu-item-243,
#menu-item-244,
#menu-item-245{
  display: none !important;
}


/* FOOTER */
.footer-1 {
    padding-top: 10px;
    background-color: var(--green);
}
.back-to-top.button.icon.circle{
  background-color: var(--green);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;
  width: 50px;
  height: 50px;
  border-radius: 8px !important;
}
.row-footer .col-footer ul li {
    margin-left: 8px;
    font-size: 16px;
}
.footer-2 .row-footer .social-icons a{
  opacity: 1;
  padding-top: unset;
  padding-bottom: unset;
}
.footer-2 .row-footer h3,
.footer-2 .row-footer h4{
  color: var(--green);
}
.footer-2 .row-footer a,
.footer-2 .row-footer li{
  color: var(--black);
}
.absolute-footer.dark {
    background-color: var(--green);
    padding: 10px 0 10px;
}
.absolute-footer.dark .copyright-footer {
    color: white;
}
.footer-2 .row{
  display: flex;
}
.footer-2 .row #custom_html-3{
  max-width: 34%;
  flex-basis: 34%;
}
.footer-2 .row #nav_menu-4,
.footer-2 .row #nav_menu-5,
.footer-2 .row #custom_html-13{
  max-width: 22%;
  flex-basis: 22%;
}
.footer-2 .widget-title{
  background-color: white;
  color: var(--black);
  padding-left: unset;
}
.footer-2 .social-icons .button{
  opacity: 1;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  margin-top: 15px;
}

@media only screen and (max-width: 767px){
  h1{
    font-size: 26px;
  }
  h2{
    font-size: 22px;
  }
  h3{
    font-size: 18px;
  }
  h4{
    font-size: 16px;
  }
}

/* Form Login */
#login-form-popup{
  border-radius: 10px;
  box-shadow: rgba(77, 128, 81, 0.323) 5px 5px,
  rgba(77, 128, 81, 0.3) 10px 10px,
    rgba(77, 128, 81, 0.2) 15px 15px,
     rgba(77, 128, 81, 0.1) 20px 20px,
      rgba(77, 128, 81, 0.05) 25px 25px;
}
#login-form-popup.lightbox-content .lightbox-inner,
#login-form-popup .account-container.lightbox-inner>.account-login-inner{
  padding: unset;
}
#login-form-popup h2{
  color: white;
  font-weight: 700;
  text-align: center;
  font-size: 28px;
  background-color: var(--green);
  padding: 15px;
  border-radius: 10px 10px 0 0;
  /* position: relative; */
}
/* #login-form-popup h2::before{
  content: '';
  position: absolute;
  background-image: url(/wp-content/uploads/2026/01/logo-Dai-Tam.png);
  background-repeat: no-repeat;
  background-size: cover;
  left: 10%;
  top: 50%;
  transform: translate(-10%, -50%);
  width: 130px;
  height: 30px;
} */
#login-form-popup .woocommerce-form-login{
  padding: 20px;
}
#login-form-popup .woocommerce-form-login label{
  font-size: 16px;
}
#login-form-popup .woocommerce-form-login__submit{
  border-radius: 10px;
  background-color: var(--green);
  text-transform: math-auto;
}

/* Button header */
.header-nav .button.icon.circle{
  background-color: transparent;
  border: unset;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.header-nav .header-button .header-account-title,
.header-nav .header-button .header-cart-title,
.header-nav .header-button .nav-top-link{
  text-transform: math-auto;
  font-size: 16px;
}

/* Show list account */
.header-nav .nav-dropdown.nav-dropdown-default>li>a{
  color: #504f4f;
  border-bottom: unset;
}
.header-nav .nav-dropdown.nav-dropdown-default>li,
.header-nav .nav-dropdown-default{
  padding: unset;
}
.header-nav .nav-dropdown>li>a{
  background-color: white;
  font-size: 16px;
  font-weight: 600;
  border-radius: unset;
}
.header-nav .account-item .nav-dropdown>li:hover{
  background-color: var(--green);
}
.header-nav .account-item .nav-dropdown>li:hover a{
  background-color: #0aab6063;
  color: white;
}
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--edit-account a,
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--user-rank a,
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--orders a,
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--customer-logout a,
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--thong-tin-bo-sung a{
  position: relative;
  padding-left: 28px;
}
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--edit-account a::before{
  content: '\f007';
  font-family: "Font Awesome 6 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--user-rank a::before{
  content: '\e561';
  font-family: "Font Awesome 6 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--orders a::before{
  content: '\f06b';
  font-family: "Font Awesome 6 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}
.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--customer-logout a::before{
  content: '\e4d1';
  font-family: "Font Awesome 6 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}

.header-nav .nav-dropdown .woocommerce-MyAccount-navigation-link--thong-tin-bo-sung a::before{
  content: '\f055';
  font-family: "Font Awesome 6 Free";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}
.header-nav .header-button .account-link,
.header-nav .header-button .header-cart-link{
  display: flex;
}
.header-nav .header-button .account-link .header-account-title,
.header-nav .header-button .header-cart-link .header-cart-title{
  order: 2;
  margin-left: 15px;
}
.header-nav .header-button .account-link .icon-user,
.header-nav .header-button .header-cart-link .icon-shopping-cart{
  order: 1;
  margin-left: unset;
  margin-right: -8px;
}
.header-nav .widget_shopping_cart a{
  background-color: var(--green);
  border-radius: 8px;
  text-transform: math-auto;
}

/* Custom Logout */
.sp-modal{ 
  position: fixed; 
  inset: 0; 
  display: none; 
  z-index: 99999; 
}
.sp-modal.is-open{
  display: block; 
}
.sp-modal__backdrop{ 
  position: absolute; 
  inset: 0; 
  background:rgba(0,0,0,.45); 
}
.sp-modal__dialog{
  position:relative;
  width:min(420px, calc(100% - 24px));
  margin: 10vh auto 0;
  background:#fff;
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  bottom: 0;
  left: 0;
  transform: translate(0, 50%);
}
.sp-modal__close{
  position: absolute; 
  right: 0; 
  top: 0;
  width: 38px; 
  height: 38px;
  border: 0; 
  background: transparent;
  font-size: 26px; 
  cursor: pointer; 
  opacity: .7;
  margin-right: unset;
}
.sp-modal__body{
  text-align: center; 
  padding: unset; 
}
.sp-modal__body h3{ 
  margin: 8px 0 6px; 
  font-size: 22px; 
  font-weight: 700;
}
.sp-modal__body p{ 
  margin: 0 0 16px; 
  opacity: .75; 
}
.sp-logout-illus img{
  width: 140px; 
  height: 140px; 
  margin: 0 auto 10px;
}
.sp-modal__actions{ 
  display: flex; 
  gap: 12px; 
  justify-content: center; 
}
.sp-btn{
  border: 0; 
  padding: 8px; 
  border-radius: 99px;
  font-weight: 700; 
  cursor: pointer; 
  min-width: 120px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-modal__actions button{
  text-transform: math-auto;
}
.sp-btn--primary{ 
  background: var(--green); 
  color:#fff; 
  text-decoration: none; 
}
.sp-btn--ghost{ 
  background:#eef2ff; 
}
#cart-popup .cart-popup-inner .button{
  text-transform: math-auto;
  font-weight: 600;
  border-radius: 8px;
}

/* REPONSIVE */
/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 1023px){
  .header .header-bottom .flex-row{
    padding: 12px 15px;
  }
  .footer-2 .row #custom_html-3{
    max-width: 100%;
    flex-basis: 100%;
  }
  .footer-2 .row #nav_menu-4,
  .footer-2 .row #nav_menu-5,
  .footer-2 .row #custom_html-13{
      max-width: 33.3333%;
      flex-basis: 33.333%;
  }
    .mobile-nav .button.icon.circle{
      background-color: transparent;
      border: unset;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
      rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
      border: 1px solid white;
      width: 45px;
  }
    .mobile-sidebar .macc {
    margin: unset;
    overflow: hidden;
    width: 100%;
  }
  .mobile-sidebar .html_top_right_text{
    padding: 10px 0 0 0 !important;
    border-top: unset !important;
  }
  .mobile-sidebar .macc--logged{
    background: linear-gradient(285deg, #5aeda9b8, #0aab61);
    border: unset;
  }
  .mobile-sidebar .macc--guest{
    padding: 14px 14px 10px;
    background: linear-gradient(285deg, #5aeda9b8, #0aab61);
    border-radius: 12px;
    color: #fff;
  }
 .mobile-sidebar .macc__trigger{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 14px;
    text-decoration: none;
 }
 .mobile-sidebar .macc__hello{
  color: white;
  font-size: 16px;
 }
 .mobile-sidebar .macc__caret{
    margin-left: auto;
    opacity: .7;
    font-size: 16px;
    color: white;
 }
 .mobile-sidebar .macc.is-open .macc__menu {
    display: block;
    background: #EDF0F3;
}
 .mobile-sidebar .macc.is-open .macc__menu a{
    display: block;
    font-size: 14px;
    padding: 10px 14px;
    color: var(--black);
    text-decoration: none;
 }
  .mobile-sidebar .macc__menu a:hover {
    background: #5aeda9b8;
}
.mobile-sidebar .macc__note{
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .mobile-sidebar .mobile-account-box .btn-wrap{
    display: flex;
    gap: 10px;
  }
  .mobile-sidebar .macc__btn {
    display: block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgb(83 151 88 / 67%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-sidebar .mobile-account-box .btn-wrap a:hover{
    background: rgba(255,255,255,.28);
  }
  .mobile-sidebar .menu-item a{
    text-transform: math-auto;
    font-size: 14px;
    color: var(--black);
  }
  #cart-popup .cart-popup-inner .cart-popup-title span{
    padding-bottom: 15px;
  }
  #cart-popup .product_list_widget{
    border: unset;
  }
  .sp-ajax-search__pill{
    border: 1px solid #e3d7d7 !important;
  }
  .html_nav_position_text_top .sp-ajax-search__input{
    height: 30px;
  }
}

/*  MOBILE */
@media only screen and (max-width: 767px){
  .sp-ajax-search__pill{
    border: 1px solid #e3d7d7 !important;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .html_nav_position_text_top .sp-ajax-search__pill{
    height: 40px;
  }
  .html_nav_position_text_top .sp-ajax-search__input{
    height: 30px;
  }
  .footer-2 .widget-title{
    text-align: left;
  }
  .footer-2 .row #custom_html-3,
  .footer-2 .row #custom_html-13{
    max-width: 100%;
    flex-basis: 100%;
  }
  .footer-2 .row #nav_menu-4,
  .footer-2 .row #nav_menu-5{
      max-width: 50%;
      flex-basis: 50%;
  }
  .mobile-nav .button.icon.circle{
    background-color: transparent;
    border: unset;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    border: 1px solid white;
    width: 45px;
  }
  .mobile-sidebar .macc {
    margin: unset;
    overflow: hidden;
    width: 100%;
  }
  .mobile-sidebar .html_top_right_text{
    padding: 10px 0 0 0 !important;
    border-top: unset !important;
  }
  .mobile-sidebar .macc--logged{
    background: linear-gradient(285deg, #5aeda9b8, #0aab61);
    border: unset;
  }
  .mobile-sidebar .macc--guest{
    padding: 14px 14px 10px;
    background: linear-gradient(285deg, #5aeda9b8, #0aab61);
    border-radius: 12px;
    color: #fff;
    margin: 0 15px;
  }
 .mobile-sidebar .macc__trigger{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 14px;
    text-decoration: none;
 }
 .mobile-sidebar .macc__hello{
  color: white;
  font-size: 16px;
 }
 .mobile-sidebar .macc__caret{
    margin-left: auto;
    opacity: .7;
    font-size: 16px;
    color: white;
 }
 .mobile-sidebar .macc.is-open .macc__menu {
    display: block;
    background: #EDF0F3;
}
 .mobile-sidebar .macc.is-open .macc__menu a{
    display: block;
    font-size: 14px;
    padding: 10px 14px;
    color: var(--black);
    text-decoration: none;
 }
  .mobile-sidebar .macc__menu a:hover {
    background: #5aeda9b8;
}
.mobile-sidebar .macc__note{
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .mobile-sidebar .mobile-account-box .btn-wrap{
    display: flex;
    gap: 10px;
  }
  .mobile-sidebar .macc__btn {
    display: block;
    text-align: center;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgb(83 151 88 / 67%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-sidebar .mobile-account-box .btn-wrap a:hover{
    background: rgba(255,255,255,.28);
  }
  .page-id-40 .content-area .woocommerce{
    background-color: #fff;
    border-radius: 10px;
    /* box-shadow: rgba(77, 128, 81, 0.323) 5px 5px,
     rgba(77, 128, 81, 0.3) 10px 10px,
      rgba(77, 128, 81, 0.2) 15px 15px,
       rgba(77, 128, 81, 0.1) 20px 20px,
        rgba(77, 128, 81, 0.05) 25px 25px; */
  }
  .page-id-40 .content-area .woocommerce h2 {
    color: white;
    font-weight: 700;
    text-align: center;
    font-size: 28px;
    background-color: var(--green);
    padding: 15px;
    border-radius: 10px 10px 0 0;
    /* position: relative; */
  }
  .page-id-40 .content-area .woocommerce .woocommerce-form-login {
    padding: 20px;
  }
  .page-id-40 .content-area .woocommerce .woocommerce-form-login__submit {
    border-radius: 10px;
    background-color: var(--green);
    text-transform: math-auto;
  }
  .mobile-sidebar .menu-item a{
    text-transform: math-auto;
    font-size: 14px;
    color: var(--black);
  }
}