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


}

.map_ft {
    width: 100%;
    padding: 15px 27px;
    border: 1px solid #fff;
    border-radius: 50%;
	text-align: center;
}
.absolute-footer {
       display: none;
}

#sl-open-letter{ position: relative; }

.sl-heading {
    background: url(/wp-content/uploads/2025/10/line_about.png) no-repeat bottom left;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

/* Style trực tiếp cho chữ bên trong */
.sl-heading span {
    display: inline-block;
    text-transform: uppercase;
    color: #333333;
    font-size: 45px;
    line-height: 45px;

    font-family: 'iCielBCPacifico-normal', sans-serif !important;
    font-weight: 700 !important;  /* cho in đậm giống hình */
}

.sl-heading{
  text-transform: uppercase;
  color: #333333;
  font-size: 45px;
  font-family: 'iCielBCPacifico-normal';
  background: url(/wp-content/uploads/2025/10/line_about.png) no-repeat bottom left;
  padding-bottom: 20px;
  margin-bottom: 25px;
  line-height: 45px;
}
.sl-box .sl-center .sl-heading span{
  padding-right: 40px;
  position: relative;
}
.sl-desc{text-align: justify;}
.sl-box .sl-center .sl-heading span::after{
  position: absolute;
  content: "";
  background: url(/wp-content/uploads/2025/10/la.png) no-repeat;
  width: 42px;
  height: 45px;
  right: 0;
  bottom: 10px;
}


.sl-box .sl-center{
  position: relative;
  padding: 10px;
  background: linear-gradient(90deg, #a3cb3a, #73b925);
  padding-left: 0;
}
.sl-box .sl-center::after{
  position: absolute;
  content: "";
  width: 53px;
  left: -53px;
  height: 100%;
  background: #fff;
  border: 10px solid #a3cb3a;
  border-right: none;
  top: 20px;
}
.sl-box::after{
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: -4px 0 5px rgba(0,0,0,0.75);
}
@media (max-width: 480px){

.sl-box .sl-center .sl-body{
  background: #fff;
  padding: 5px 5px;
}}
@media (min-width: 500px){

.sl-box .sl-center .sl-body{
  background: #fff;
  padding: 78px 50px;
}
#header{margin-bottom: -110px;}}

.sl-desc p{
  margin: 0 0 14px 0;
  color: #555;
  line-height: 1.8;
}
.sl-desc a{ color:#2a7ae2; text-decoration:none; }
.sl-desc a:hover{ text-decoration:underline; }

.sl-cta{
  --cta-h: 50px;
  --cta-green:#75b600;
  position: relative;
  display: inline-flex !important;     
  align-items: center;
  gap: 0px;
  width: 100%;
  max-width: 200px;
  min-height: var(--cta-h);
  background: transparent;
  border-radius: 5px;
  margin-top: 25px;
  text-decoration: none !important;
}


.sl-cta .sl-cta-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 42px;
  background: var(--cta-green);
  flex: 0 0 47px;
	border-bottom-left-radius: 5px;
 border-top-left-radius: 5px;
}
.sl-cta .sl-cta-icon img{
  width: 22px; height: 22px;
  display: block; object-fit: contain;
}


.sl-cta .sl-cta-text{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  width: calc(100% - 47px);
  background: #fff;
  color: #333333;
  border: 2px solid var(--cta-green);
  border-bottom-right-radius: 5px;
 border-top-right-radius: 5px;
  overflow: hidden;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.sl-cta .sl-cta-text::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:0;
  background: var(--cta-green);
  z-index:1;
  transition: width .3s ease, inset .3s ease;
}
.sl-cta:hover .sl-cta-text{ color:#fff; border-color: var(--cta-green); }
.sl-cta:hover .sl-cta-text::after{ inset:0; width:100%; }
.sl-cta .sl-cta-label{ position: relative; z-index: 2; font-size:15px; font-family:'Muli-Regular', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }


.sl-cta, .sl-cta *{ float:none !important; box-shadow:none !important; }
.blog-home .box-push .box-text{
	    background-color: hsla(0, 0%, 100%, .95);
    margin: -15% auto 0;
    max-width: 85%;
    padding: 15px 20px;
}

.box-overlay .box-text{
	width:60%;
	    position: absolute;
    left: -10px;
    bottom: 10px;
    background: linear-gradient(#73b925, #a3cb3a);
    min-width: 230px;
    padding: 15px 20px;
    text-align: center;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.box-overlay .box-text:before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(#73b925, #a3cb3a);
    transition: all .3s 
ease;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.img-solo .box-text-inner:after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    left: 0px;
    bottom: -10px;
    background: url(/wp-content/uploads/2025/10/line_ht.png) no-repeat;
}
/* Card */
.cf7-agency-card{
  background:#fff; border:6px solid #75b600; border-radius:12px;
  padding:22px 18px 26px; box-shadow:0 6px 0 #5f9900; position:relative;
  max-width:380px; margin:0 auto;
}
/* Tiêu đề mũ vòm như ảnh */
.cf7-agency-card>h3{
  background:#75b600; color:#fff; text-align:center; font-weight:700;
  margin:-28px -1px 18px; padding:14px 16px; border-radius:0 0 28px 28px;
  font-size:20px;
}

/* Field chung */
.cf7-agency-card .field{ margin-bottom:14px; }
.cf7-agency-card .field.has-icon{ position:relative; }
.cf7-agency-card .field.has-icon i{
  position:absolute; right:14px; top:35%; transform:translateY(-50%);
  color:#75b600; font-size:18px; pointer-events:none;
}

/* Input, Textarea */
.cf7-agency-card input[type="text"],
.cf7-agency-card input[type="email"],
.cf7-agency-card textarea{
  width:100%; background:#fff; border:1px solid #e6e6e6; border-radius:10px;
  padding:12px 44px 12px 14px; font-size:15px; color:#333;
  outline:none; box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.cf7-agency-card textarea{ min-height:110px; resize:vertical; }

/* Captcha 2 cột */
.cf7-agency-card .two-cols{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.cf7-agency-card .two-cols .captcha-img img{
  height:44px; display:block; border-radius:6px;
}
.cf7-agency-card .two-cols .has-icon i{ right:12px; }

/* Nút submit với icon giấy máy bay */
.cf7-agency-card .actions input[type="submit"].btn-green{
  width:100%; background:#75b600; color:#fff; border:0; border-radius:10px;
  padding:14px 18px; font-weight:700; font-size:16px; cursor:pointer;
  position:relative; box-shadow:0 4px 0 #5f9900;
}
.cf7-agency-card .actions input[type="submit"].btn-green:hover{
  filter:brightness(1.04);
}
.cf7-agency-card .actions input[type="submit"].btn-green:after{
  content:"\f1d8"; /* paper-plane */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  margin-left:10px; display:inline-block;
}

/* Trạng thái focus */
.cf7-agency-card input:focus, .cf7-agency-card textarea:focus{
  border-color:#75b600; box-shadow:0 0 0 3px rgba(117,182,0,.12);
}

/* Đảm bảo icon không che chữ */
.cf7-agency-card .wpcf7-form-control{ box-sizing:border-box; }
/* vùng chứa nút */
.cf7-agency-card .actions{
  position: relative;
}



/* icon mũi tên nằm “trong” nút */
.cf7-agency-card .actions .fa-location-arrow{
  position:absolute;
  right:70px;                 /* vị trí icon trong nút */
  top:28%;
  transform:translateY(-50%);
  font-size:18px;
  color:#fff;
  pointer-events:none;        /* không chặn click của nút */
}

/* hiệu ứng hover nhẹ */
.cf7-agency-card .actions input[type="submit"].btn-green:hover{
  filter:brightness(1.05);
}
.cf7-agency-card .actions input[type="submit"].btn-green:hover + .fa-location-arrow{
  transform:translateY(-50%) translateX(2px);
}
.badge.post-date {
    top: 70%;
}


.img .caption {
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 14px;
    max-height: 100% !important;
    overflow-y: auto;
    padding: 4px 10px;
    transform: translateY(0%);
    transition: transform .5s;
    width: 100%;
}
.slider-solo{
	margin-left: 30px;
    margin-right: 30px;
	}
/*cf7-lien-he*/
.cf7-row p{display:flex;}
.cf7-row p label{width:15%}
.two-cols{display:flex;}
.has-icon-1{width:15%}
.wpcf7-spinner{display:none;}
.kb-btn--primary{background-color:#55c803}
.cf7-actions{margin-left: 15%;}
.kb-btn--primary{background-color:#55c803;color: #fff;}
.video-class{display:flex;align-items: flex-end;}
.video-class .mo-ta-td{   
width: 100%;
    max-width: 54px;
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    font-family: 'RobotoBold';
    background: linear-gradient(#73b925, #a3cb3a);
    margin-top: 15px;
	height: 85px;
margin-bottom: 0em!important;}
.video-class .mo-ta{
	    background-color: #fff;
    color: #000;
    padding: 5px;
	margin-bottom: 0em!important;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-class .mo-ta span{
	font-size: 18px;
    color: #73b925;
	}
.price-wrapper-solo{display:flex;line-height: 2;
    align-items: center;}
.price-label-save{margin-left:10px}
.product-info .price {
    font-size: 15px;
	font-weight:normal;
	margin: .5em 0;}
.price-old .woocommerce-Price-amount{
	text-decoration: line-through;
    font-size: 17px;
    color: black;
	  opacity: 100%;
    font-weight: 700;
}
.price-new .woocommerce-Price-amount{
	    font-size: 18px;
    font-weight: bold;
    color: #72b925;
	margin-left:5px;}
.price-save{
	font-size: 18px;
    font-weight: bold;
    color: #72b925;
	margin-left:5px;}
}
.slomo-title .product-title{border-bottom: 1px dashed #ccc;}
.post-item .text-left{margin-left: 40px;width: 85%}
.title-wrapper p a {
    color: #564316 !important;
     font-weight: bold;
     font-family:'texgyreadventor-regular';
    font-size: 14px;
    margin-top: -5px;
}
.title-wrapper p a:hover {
    color: #72b925 !important;
}
.product-small .price-wrapper{display: none;}
.z-1 {z-index: 0;}

/* ===== Floating Buttons ===== */
.btn-frame{
  position: fixed;
  right: 20px;
  width: 50px;
  height: 50px;
  display: block;
  cursor: pointer;
  z-index: 1000; /* cao hơn so với 10 để tránh bị che */
}

/* Vị trí riêng cho từng nút */
.btn-frame.btn-zalo{ bottom: 150px; }
.btn-frame.btn-phone{ bottom: 71px; }

.btn-frame i{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #7dbe00;
  z-index: 1;
}
.btn-frame i img{
  width: 70%;
  vertical-align: middle;
}

/* Vòng tròn hiệu ứng */
.btn-frame .kenit-alo-circle{
  position: absolute;
  top: -5px; right: -5px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #7dbe00;
  opacity: .5;
}
.btn-frame .kenit-alo-circle-fill{
  position: absolute;
  top: -10px; right: -10px;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: rgba(7,41,103,0.35);
  opacity: .4;
  transition: all .5s ease;
}

/* ===== Utilities ===== */
.transition{ transition: 0.3s ease-out; }

/* Scale IMG */
.scale-img{
  display: block;
  overflow: hidden;
}
.scale-img img{
  transition: 0.3s ease-out;
  transform: scale(1);
}
.scale-img:hover > img{
  transform: scale(1.1);
}

/* Blink (nhấp nháy) */
.blink{
  animation: blink 1s linear infinite;
}
@keyframes blink{
  0%{opacity:1}
  50%{opacity:0}
  100%{opacity:1}
}

/* ===== Animations chung cho btn-frame ===== */
.btn-frame .animated{ animation-duration: 1s; animation-fill-mode: both; }
.btn-frame .animated.infinite{ animation-iteration-count: infinite; }
.btn-frame .zoomIn{ animation-name: zoomIn; }
.btn-frame .pulse{ animation-name: pulse; }

/* Bổ sung keyframes bị thiếu */
@keyframes zoomIn{
  from{ opacity: 0; transform: scale(0.3); }
  50%{ opacity: 1; }
  to{ transform: scale(1); }
}
@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* ===== Giảm chuyển động nếu người dùng chọn reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  .transition,
  .scale-img img,
  .scale-img:hover > img,
  .btn-frame .kenit-alo-circle-fill{
    transition: none !important;
  }
  .blink,
  .btn-frame .animated,
  .btn-frame .zoomIn,
  .btn-frame .pulse{
    animation: none !important;
  }
}

/* ===== Responsive tweak nhỏ ===== */
@media (max-width: 480px){
  .btn-frame{ right: 12px; }
  .btn-frame.btn-zalo{ bottom: 120px; }
  .btn-frame.btn-phone{ bottom: 56px; }
}
/* Floating cart button (right) */
.floating-cart {
  position: fixed;
  right: 20px;
  top: 30%;
  z-index: 9999;
}
.floating-cart .off-canvas-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  text-decoration: none;
  border: 1px solid #75b600;
}
.floating-cart .fc-icon {
  display: inline-flex;
  line-height: 1;
  font-size: 18px;
}
.floating-cart .fc-count {
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
@media (max-width: 767px) {
  .floating-cart { right: 12px; top: auto; bottom: 50%; } /* tránh đè nút chat/back-to-top */
}

/* Vị trí nút giỏ hàng nổi mép phải */
#floating-cart.floating-cart {
  position: fixed;
  right: 20px;
      background-color: #fff;
    padding: 5px 10px;
    border-radius: 10px;         /* chỉnh lên/xuống tuỳ ý */
  z-index: 9999;
}

/* Link bao icon + số lượng */
#floating-cart .floating-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;              /* khoảng cách icon – số */
  text-decoration: none;
}

/* Icon giỏ hàng */
#floating-cart .fc-icon i {
  font-size: 22px;
  line-height: 1;
  color: #000;           /* màu icon */
}

/* Số lượng (0) */
#floating-cart .fc-count {
  font-size: 14px;
  line-height: 1;
  color: #7bc143;        /* xanh giống hình, chỉnh tuỳ ý */
  font-weight: 600;
}
.flickity-prev-next-button svg {
   
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);}
    .slider-nav-circle .flickity-prev-next-button .arrow, .slider-nav-circle .flickity-prev-next-button svg {
    border: 0px solid;
    border-radius: 100%;
}