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

/*************** ADD CUSTOM CSS HERE.   ***************/
/*
Theme Name: MaiNgoi.vn (Optimized)
Description: Refactored CSS - clean structure
*/

/* =====================================================
   1. ROOT + BASE
===================================================== */
:root{
  --main-color: #6a4113;
  --bg-dark: #18120B;
  --text-gold: #fdd869;
  --text-white: #ffffff;
}

body{
  margin:0;
  padding:0;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Averta', Arial, sans-serif !important;
  font-weight: 400;
}

/* =====================================================
   2. HEADER + NAV
===================================================== */
.header-main{
  border-bottom: 4px solid var(--main-color);
  z-index: 40;
}

.header-nav-main > li > a{
  padding: 18px 10px;
}

.header-nav-main > li{
  margin: 0 3px !important;
}

.header-nav-main li a{
  font-weight: normal !important;
}

.header-nav-main > li > a:hover{
  background: var(--main-color);
  color: var(--text-white) !important;
  transition: all 150ms ease-in-out;
}

/* Dropdown */
.header-main .nav-dropdown{
  background: var(--bg-dark);
  box-shadow: 0 1px 2px #ccc;
}

.header-main .nav-dropdown li a{
  color: var(--text-gold);
}

/* Logo */
#header #logo img,
#header .stuck #logo img{
  max-height: 50px !important;
}

/* =====================================================
   3. SIDEBAR
===================================================== */
aside#nav_menu-3,
#custom_html-3{
  clear: both;
  padding-top: 10px;
}

.div-sp-sidebar span.widget-title{
  border-bottom: 2px solid;
  padding-bottom: 7px;
  color: var(--text-gold);
}

.div-sp-sidebar .is-divider{
  display: none;
}

.div-sp-sidebar ul.menu li{
  float: left;
}

.div-sp-sidebar ul.menu li a{
  background: var(--bg-dark);
  color: var(--text-gold);
  padding: 5px 13px;
  display: inline-block;
}

/* =====================================================
   4. BUTTON (GỘP CHUNG)
===================================================== */
.btn-style,
.section a.button,
.wpcf7-submit{
  background: var(--bg-dark);
  color: var(--text-gold);
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
  padding: 5px 13px;
  height: 37px;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.btn-style:hover,
.section a.button:hover,
.wpcf7-submit:hover{
  background: var(--main-color) !important;
  color: var(--text-white) !important;
}

/* =====================================================
   5. PRODUCT
===================================================== */
.product-small .box-image{
  border: 2px solid var(--main-color);
  box-shadow: 0 0 5px #e5e5e5;
  position: relative;
}

.product-small .product-title a{
  color: var(--text-gold);
  font-size: 17px;
  font-weight: 400;
}

/* Shine effect */
@keyframes shine{
  100%{ left:125% }
}

.product-small .box-image::before{
  content:'';
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  transform: skewX(-25deg);
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.3));
}

.product-small .box-image:hover::before{
  animation: shine .75s;
}

/* =====================================================
   6. SOCIAL FLOAT
===================================================== */
.social_page-default{
  position: fixed;
  z-index: 988;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

.social_page-default ._item{
  margin-bottom: 15px;
  height: 38px;
  transition: all .4s ease;
}

.social_page-default ._item:hover{
  transform: translateX(-148px);
}

/* =====================================================
   7. FORM
===================================================== */
input, textarea, select{
  font-weight: 400;
  border-radius: 4px;
  box-shadow: none;
}

.wpcf7-submit{
  cursor: pointer;
}

/* =====================================================
   8. PAGINATION
===================================================== */
.nav-pagination > li > a,
.nav-pagination > li > span{
  background: #5B5B5D;
  color: white !important;
  height: 2.3em;
  line-height: 2.3em;
  border: none;
}

/* =====================================================
   9. TYPOGRAPHY
===================================================== */
h1.entry-title{
  font-size: 24px !important;
  text-align: center;
  color: var(--text-gold);
}

h3.title-home{
  text-align: center;
  font-size: 28px;
}

/* =====================================================
   10. LAYOUT
===================================================== */
.row-full-width .row{
  max-width: 2048px;
}

.row-border-top{
  border-top: 1px solid #3f3f3f;
  padding-top: 20px;
}

/* =====================================================
   11. RESPONSIVE
===================================================== */
@media (min-width:1023px){
  #top-bar .flex-left{
    padding-left:165px;
  }
}

@media (max-width:855px){
  .span-count{
    font-size:16px;
  }
}