/*
Theme Name: Flatsome Child
Template: flatsome
Version: 3.0
*/

/* =========================
   HOA HOA LÁ LÁ - GLOBAL
   Brand color: #29617C
========================= */

:root{
  --brand: #29617C;
  --brand-dark: #1F4D63;
  --brand-soft: #EAF3F6;
  --bg: #F8F4EF;
  --surface: #FFFFFF;
  --text: #24343A;
  --muted: #6F7E83;
  --line: rgba(41,97,124,.14);
  --gold: #D9A441;
}
/* ===== HOA HOA LÁ LÁ - HEADER FIX ===== */

:root{
  --hhl-bg: #F9F4EF;
  --hhl-blue: #29617C;
  --hhl-blue-dark: #1F4E66;
  --hhl-text: #24343A;
}



/* nền header chính */
#masthead,
#masthead.header-main,
#masthead .header-main,
#masthead .header-inner{
  background: var(--hhl-bg) !important;
}

/* bỏ đường line xấu */
#masthead .top-divider,
#masthead + .container .top-divider,
.header-wrapper .top-divider{
  display: none !important;
}

/* logo */
#logo img{
  max-height: 92px !important;
  width: auto !important;
  object-fit: contain;
}

/* menu trái */
#masthead .header-nav-main > li > a,
#masthead .nav-top-link{
  color: var(--hhl-blue) !important;
  font-weight: 700;
  letter-spacing: .4px;
}

#masthead .header-nav-main > li > a:hover,
#masthead .nav-top-link:hover{
  color: var(--hhl-blue-dark) !important;
}

/* menu active */
#masthead .current-menu-item > a,
#masthead .current_page_item > a,
#masthead .current_page_parent > a{
  color: var(--hhl-blue-dark) !important;
}

/* dropdown */
#masthead .nav-dropdown{
  background: #fff !important;
  border: 1px solid rgba(41,97,124,.12);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(41,97,124,.14);
  padding: 10px 0;
}

#masthead .nav-dropdown li a{
  color: var(--hhl-text) !important;
  font-weight: 500;
}

#masthead .nav-dropdown li a:hover{
  color: var(--hhl-blue) !important;
  background: rgba(41,97,124,.06) !important;
}

/* search */
#masthead .header-search-form .searchform-wrapper{
  background: #fff !important;
  border: 1px solid rgba(41,97,124,.16);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(41,97,124,.08);
}

#masthead input.search-field{
  background: #fff !important;
  color: var(--hhl-text) !important;
  border: 0 !important;
  height: 42px;
}

#masthead input.search-field::placeholder{
  color: rgba(36,52,58,.45);
}

#masthead .ux-search-submit{
  background: var(--hhl-blue) !important;
  border-color: var(--hhl-blue) !important;
  color: #fff !important;
  width: 46px;
  border-radius: 999px !important;
}

#masthead .ux-search-submit i{
  color: #fff !important;
}

/* icon mobile */
#masthead .icon-menu,
#masthead .cart-icon strong{
  color: var(--hhl-blue) !important;
  border-color: var(--hhl-blue) !important;
}

/* mobile */
@media only screen and (max-width: 849px){
  #masthead,
  #masthead .header-inner{
    background: var(--hhl-bg) !important;
  }

  #logo img{
    max-height: 72px !important;
  }
}

/* BODY */
html, body,
#main,
.page-wrapper{
  background: var(--bg) !important;
  color: var(--text);
}

.page-wrapper{
  padding: 0 !important;
}

/* HEADER */
#top-bar{
  background: var(--brand-dark) !important;
  color: #fff !important;
}

#top-bar a,
#top-bar .html,
#top-bar span{
  color: #fff !important;
}

#masthead,
#masthead .header-main{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line);
}

#wide-nav{
  background: var(--brand) !important;
}

#wide-nav a,
#wide-nav .nav > li > a{
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .2px;
}

#wide-nav .nav > li > a:hover{
  color: #F8E6B0 !important;
}

/* LOGO AREA */
.header-main .nav > li > a{
  color: var(--brand-dark) !important;
  font-weight: 600;
}

.header-main .nav > li > a:hover{
  color: var(--brand) !important;
}

/* SEARCH */
@media (min-width: 850px){
  .header-search-form .searchform-wrapper{
    background: #fff;
    border-radius: 999px;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(41,97,124,.10);
    overflow: hidden;
  }

  .header-search-form input.search-field{
    background: transparent;
    color: var(--text);
    border: 0;
  }

  .header-search-form input.search-field::placeholder{
    color: rgba(36,52,58,.45);
  }

  .header-search-form .ux-search-submit{
    background: var(--brand) !important;
    color: #fff !important;
    border: 0;
  }

  .header-search-form .ux-search-submit i{
    color: #fff !important;
  }
}

/* SECTION */
.section,
.section-bg,
.section-bg.fill,
.section-bg.bg-loaded{
  background-color: var(--bg) !important;
}

.section.dark{
  background-color: var(--brand) !important;
}

.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark p{
  color: #fff !important;
}

/* TITLE */
h1, h2, h3, h4{
  color: var(--brand-dark);
  font-weight: 700;
}

h1{ font-size: clamp(34px,4.2vw,58px); }
h2{ font-size: clamp(26px,3vw,42px); }
h3{ font-size: clamp(20px,2.2vw,28px); }

.section-title{
  border-bottom: 0 !important;
  text-align: center;
}

.section-title span{
  border: 0 !important;
  color: var(--brand-dark);
  font-weight: 700;
  letter-spacing: .5px;
}

.section-title:after{
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  background: var(--gold);
  margin: 12px auto 0;
  border: 0 !important;
}

/* BUTTON */
.button,
button,
input[type="submit"]{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(41,97,124,.18);
}

.button:hover,
button:hover,
input[type="submit"]:hover{
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  transform: translateY(-1px);
}

/* PRODUCT CARD */
.product-small .col-inner,
.product-small.box,
.box{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(41,97,124,.08);
  transition: all .25s ease;
}

.product-small .col-inner:hover,
.box:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(41,97,124,.16);
}

.product-small .box-image img,
.box-image img{
  transition: transform .35s ease;
}

.product-small:hover .box-image img,
.box:hover .box-image img{
  transform: scale(1.04);
}

.product-title,
.product-title a{
  color: var(--brand-dark) !important;
  font-weight: 600;
}

.price,
.amount{
  color: var(--brand) !important;
  font-weight: 700;
}

/* CATEGORY CARD */
.box-text{
  padding: 16px 14px 20px;
}

.box-text h3,
.box-text h4{
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.box-text .button{
  margin-top: 10px;
}

/* BADGE SALE */
.badge-inner{
  background: var(--brand) !important;
  color: #fff !important;
}

/* BREADCRUMB */
.breadcrumbs,
.breadcrumbs a{
  color: var(--muted) !important;
}

/* FOOTER */
.footer-1{
  background: var(--brand-soft) !important;
  border-top: 0 !important;
  padding: 36px 0 !important;
}

.footer-1,
.footer-1 p,
.footer-1 a,
.footer-1 span{
  color: var(--brand-dark) !important;
}

.footer-2{
  background: var(--brand-dark) !important;
  border-top: 0 !important;
}

.footer-2,
.footer-2 p,
.footer-2 a,
.absolute-footer,
.absolute-footer p,
.absolute-footer a{
  color: #fff !important;
}

/* FORM */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--text) !important;
}

input:focus,
textarea:focus,
select:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(41,97,124,.12) !important;
}

/* MOBILE */
@media only screen and (max-width: 48em){
  #masthead,
  #masthead .header-main{
    background: #fff !important;
  }

  #wide-nav{
    background: var(--brand) !important;
  }

  .mobile-sidebar,
  .off-canvas-left .mfp-content{
    background: var(--brand-dark) !important;
  }

  .mobile-sidebar a,
  .mobile-sidebar .nav > li > a{
    color: #fff !important;
  }

  .product-small .col-inner,
  .box{
    border-radius: 14px;
  }

  h1{ font-size: 32px; }
  h2{ font-size: 26px; }
}
/* Ẩn toàn bộ khu vực bình luận bài viết */
#comments,
.comments-area,
.comment-respond,
.comment-list{
  display:none !important;
}
.woocommerce-variation-add-to-cart, form.cart{
display:none;
margin-top: 5px;
}
.woocommerce-tabs{
display:none !important;
}
.header-newsletter-item, .header-social-icons{
display:none !important;
}
.account-item{
    display: none !important;
}