/*
Theme Name: Theme Cloud
Description: This is a child theme for Flatsome Theme
Template: flatsome
Version: 3.0
*/
@import "assets/css/default.css?v=2";
@import "assets/css/theme.css";
@import "assets/css/center-slider.css";
@import "assets/css/product-horizontal.css?v=1";
@import "assets/css/breadcrumb-product.css?v=1";
@import "assets/css/product-accordion.css";
@import "assets/css/product-related-vertical.css";

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

/* =====================================================
   TYPOGRAPHY & GLOBAL STYLES
   ===================================================== */

/* Import Be Vietnam Pro font from Google Fonts - Vietnamese-optimized font family */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Global body typography settings */
body{
  font-size: 16px !important;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 300; /* Light font weight for body text */
}
a.button{
  display: inline-flex;
  align-items: center;
}
.button i, button i{
  top: 0px !important;
}
.button span{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tabbed-content .nav *,
.tabbed-content .nav{
  font-family: "Be Vietnam Pro", sans-serif;
}

.header-main .nav > li > a{
    padding: 7px 20px;
    display: inline-flex;
}
.star-rating span::before{
  color: #ffa104;
}
/* =====================================================
   TOP BAR STYLES
   ===================================================== */

/* Hide left and right sections of top bar */
#top-bar .flex-right,
#top-bar .flex-left{
  display:none;
}

/* Make center section of top bar full width */
#top-bar .flex-center{
  width:100%;
}

/* =====================================================
   SEARCH BOX TEMPLATE
   ===================================================== */

/* Search box container - flexbox layout centered */
.search-box-template{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Search input field styling - rounded corners, no border */
.search-box-template .search-field{
    border: 0px !important;
    outline: none !important;
    border-radius: 20px;
    box-shadow: none !important;
    height: auto !important;
    padding: 5px 20px;
    font-size: 14px;
}

/* Placeholder text styling - italic and semi-transparent */
.search-box-template .search-field::placeholder {
  font-style: italic;
  opacity: 0.7;
}

/* Search form container - max width and positioning */
.search-box-template form{
  max-width:260px;
  position: relative;
  width:100%;
}

/* Search submit button - circular orange gradient button positioned inside input */
.search-box-template form.searchform button.submit-button{
    position: absolute;
    right: 10px;
    top: 50%;
    border-radius: 50% !important;
    width: 28px;
    height: 28px;
    display: inline-flex;
    transform: translate(0, -50%);
    min-width: auto;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;
    background: #EF5120;
    background: linear-gradient(90deg, rgba(239, 81, 32, 1) 0%, rgb(225 61 11) 100%);
}

/* Search button icon size */
.search-box-template form.searchform button.submit-button i{
  font-size: 14px;
  top:auto;
}

/* =====================================================
   HEADER & LOGO STYLES
   ===================================================== */

/* Header z-index to ensure it stays on top */
#header{
  position: relative;
  z-index: 100;
}

/* Logo container with white background */
#masthead #logo{
  padding:0px 15px;
  position: relative;
  background: #FFF;
}
#logo img{
  margin-top: 10px;
}
/* Decorative element behind logo - creates extended white background effect with rounded bottom */
#masthead #logo:after{
  content: "";
  position: absolute;
  bottom: -30%;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: #FFF;
}

/* Logo link z-index to appear above the ::after pseudo-element */
#masthead #logo a{
  position: relative;
  z-index: 10;
}

/* Center-align header navigation on both sides */
#masthead .header-nav.nav-right,
#masthead .header-nav.nav-left{
  justify-content: center;
}

/* =====================================================
   STICKY HEADER MODIFICATIONS
   ===================================================== */

/* Remove decorative element when header is stuck/scrolling */
#header .header-wrapper.stuck #masthead #logo:after{
  display: none;
}

/* Remove logo padding when header is stuck */
#header .header-wrapper.stuck #logo{
  padding: 0px;
}

/* Reduce logo size when header is stuck */
#header .header-wrapper.stuck #logo img{
  max-height: 55px !important;
  margin-top: 5px;
}

/* =====================================================
   FOOTER STYLES
   ===================================================== */

/* Footer template positioning for decorative elements */
#footer .footer-template{
  position: relative;
}

/* Decorative footer background image - bottom left */
#footer .footer-template:after{
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: url(assets/images/footer02.png);
  width: 30%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

/* Decorative triangle element above footer row */
#footer .footer-template .row-footer:before {
    content: "";
    position: absolute;
    bottom: calc(100% + 45px);
    left: 37px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 60px solid rgb(255, 238, 238);
}
/* Footer row positioning */
#footer .footer-template .row-footer{
  position: relative;
}

/* Absolute footer text color - white */
#footer .absolute-footer{
  color:#FFF !important;
}

/* =====================================================
   SIDEBAR BUTTON STYLES
   ===================================================== */

/* Primary sidebar button - transparent border for hover effect */
a.button.primary.button-sidebar{
  border:2px solid transparent;
}

/* Primary sidebar button hover - inverted colors with border */
a.button.primary.button-sidebar:hover{
  color:var(--fs-color-primary) !important;
  background: #FFF !important;
  box-shadow: none !important;
  border:2px solid var(--fs-color-primary) !important;
}

/* White sidebar button - black text */
a.button.white.button-sidebar-white{
  color:#000 !important;
}

/* White sidebar button hover - primary color background */
a.button.white.button-sidebar-white:hover{
  background: var(--fs-color-primary) !important;
  color:#FFF !important;
  box-shadow: none !important;
}

/* Green text button - white background */
a.button.button-green-text{
  color:#3CB74C !important;
  background: #FFF !important;
}

/* =====================================================
   BLOG ARCHIVE PAGE STYLES
   ===================================================== */

/* Archive header top padding */
.blog-wrapper.blog-archive .archive-page-header{
  padding-top: 70px;
}

/* Archive blog row - max width constraint */
body.single.single-post #content .row-archive-blog,
.blog-wrapper.blog-archive .row-archive-blog{
  max-width:1040px;
}

/* Archive page title - orange color, bold */
.blog-wrapper.blog-archive .page-title{
  font-size: 30px;
  color: #ef5120 !important;
  font-weight: 600;
}

/* Taxonomy description styling */
.blog-wrapper.blog-archive .taxonomy-description{
  max-width:1000px;
  font-size: 16px;
}

/* Taxonomy description paragraph spacing */
.blog-wrapper.blog-archive .taxonomy-description p{
  margin-bottom: 10px !important;
}

/* Remove top padding from post list */
.blog-wrapper .row-archive-blog #post-list{
  padding-top: 0px;
}

/* Post item image - rounded corners */
.blog-wrapper .row-archive-blog #post-list .post-item .box-image .image-cover,
.blog-wrapper .row-archive-blog #post-list .post-item .box-image{
  border-radius: 30px;
}

/* Post item image aspect ratio - 4:3 ratio (75%) */
.blog-wrapper .row-archive-blog #post-list .post-item .box-image .image-cover{
  padding-top: 75% !important;
}

/* Hide entry meta (date, author, etc.) */
.blog-wrapper .row-archive-blog #post-list .post-item .entry-meta{
  display: none;
}

/* Hide divider line */
.blog-wrapper .row-archive-blog #post-list .post-item .is-divider{
  display: none;
}

/* Post title styling - bold, with margins */
.blog-wrapper .row-archive-blog #post-list .post-item .post-title{
  font-weight: 700;
  margin:10px 0px;
  font-size: 18px; 
}

/* Post item container - centered with max width */
.blog-wrapper .row-archive-blog #post-list .post-item{
  max-width:700px;
  margin:10px auto;
  padding:0px;
}

/* Excerpt text size */
.blog-wrapper .row-archive-blog #post-list .post-item .from_the_blog_excerpt {
  font-size: 15px;
}

/* Read more button styling - minimal, with icon */
.blog-wrapper .row-archive-blog #post-list .post-item a.button{
  border: 0px;
  padding: 0px;
  color: #424242 !important;
  text-transform: none;
  font-style: italic;
  background: none !important;
  font-size: 14px;
  font-weight: 400 !important;
  position: relative;
  padding-right: 25px;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin:0px;
}

/* Read more button icon - circular arrow icon */
.blog-wrapper .row-archive-blog #post-list .post-item a.button:after{
  content: "";
  position: absolute;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(assets/images/icon-blog.png);
  right: 2px;
  top: 50%;
  transform: translate(0, -50%);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  background-size: cover;
}

/* Read more button hover - primary color */
.blog-wrapper .row-archive-blog #post-list .post-item a.button:hover{
  color: var(--fs-color-primary);
}

/* Image share wrapper positioning */
.blog-wrapper .row-archive-blog #post-list .post-item .img-share-wrapper{
  position: inherit !important;
}
.blog-wrapper .row-archive-blog #post-list .post-item .img-share-wrapper .img-share-btn {
    display: none !important;
}

/* Share modal close button - remove background */
body .img-share-modal-close:hover,
body .img-share-modal-close{
  background: none !important;
}

/* =====================================================
   FEATURED/FIRST POST STYLES (Archive Page)
   ===================================================== */

/* First post image - full width */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .box-image{
  width:100% !important;
  display: block;
  position: relative;
}

/* First post text container */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .box-text{
  display: block;
}

/* First post blog box layout */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .box-blog-post{
  display: block;
}

/* Hide badge on first post */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .badge{
  display: none !important;
}

/* First post text inner box - overlapping gray background with rounded corners */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .box-text .box-text-inner.blog-post-inner{
  background: #F3F3F3;
  padding: 20px 100px 20px 50px;
  border-radius: 20px;
  margin-top: -100px; /* Overlap with image above */
}

/* Hide read more button on first post */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child a.button{
  display: none;
}

/* First post - full width container */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child{
  width:100%;
  max-width:100%;
}

/* First post title - larger font */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .post-title{
  font-size: 20px;
}

/* First post share button - visible and positioned */
.blog-wrapper .row-archive-blog #post-list .post-item:first-child .img-share-wrapper .img-share-btn{
  display: inline-flex !important;
  top: 90% !important;
  right: 50px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* =====================================================
   SINGLE POST PAGE STYLES
   ===================================================== */

/* Hide entry divider on single post */
body.single.single-post #content .row-archive-blog .entry-header .entry-divider{
  display: none;
}

/* Single post content top padding */
body.single.single-post #content{
  padding-top:50px;
}

/* Single post title margin */
body.single.single-post #content .entry-title{
  margin-bottom: 30px;
}

/* Remove padding from entry header text */
body.single.single-post #content .entry-header-text{
  padding-bottom: 0px;
}

/* Single post header image - rounded corners */
body.single.single-post #content .entry-header img{
  border-radius: 20px;
}

/* Single post share button positioning */
body.single.single-post #content .entry-header button.img-share-btn{
  top:5% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* Single post header padding for share button space */
body.single.single-post #content .entry-header{
  padding-bottom: 70px;
}

/* Copy button background - primary color */
body .img-share-copy-btn:hover,
body .img-share-copy-btn{
  background: var(--fs-color-primary) !important;
}

/* Single post content - centered with max width */
body.single.single-post #content .entry-content.single-page > * {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}

/* Allow full width for paragraphs containing images */
body.single.single-post #content .entry-content.single-page p.has-img,
body.single.single-post #content .entry-content.single-page p:has(img) {
  max-width: 100%;
}

/* Images and tables - full width within container */
body.single.single-post #content .entry-content.single-page img,
body.single.single-post #content .entry-content.single-page table {
  max-width: 100%;
  width: 100%;
}

/* =====================================================
   MOBILE RESPONSIVE - ARCHIVE PAGE
   Max width: 549px (Small mobile devices)
   ===================================================== */

@media (max-width:549px){
  /* Reduce padding on first post text box for mobile */
  .blog-wrapper .row-archive-blog #post-list .post-item:first-child .box-text .box-text-inner.blog-post-inner{
    padding:20px 15px;
    width: 90%;
    margin-left: auto;  
    margin-right: auto;
  }
}

body.single.single-post .custom-related-blog .container{
    max-width: 1100px;
}

/* =====================================================
   RELATED POSTS SECTION
   ===================================================== */

/* Related posts container */
.custom-related-blog {
  width: 100%;
  margin-top: 40px;
}

/* Related posts heading with decorative line */
.custom-related-blog .related-heading {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  gap: 20px;
  max-width:900px;
  margin:0px auto 35px auto;
}

/* Decorative line after heading text */
.custom-related-blog .related-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

/* Related posts container - centered */
.custom-related-blog .container {
  margin: 0 auto;
  padding: 0 15px;
}

/* Related posts grid - 3 columns */
.custom-related-blog .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Related post item - card style with rounded corners */
.custom-related-blog .related-item {
  background: #f3f3f3;
  border-radius: 30px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Related post thumbnail link */
.custom-related-blog .related-thumb {
  display: block;
  position: relative;
  overflow: hidden;
}

/* Related post thumbnail image */
.custom-related-blog .related-thumb img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

/* Related post hover effect - scale image */
.custom-related-blog .related-item:hover .related-thumb img {
  transform: scale(1.05);
}

/* Green accent line under thumbnail */
.custom-related-blog .related-thumb::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #4caf50; /* Green accent color */
}

/* Related post content padding */
.custom-related-blog .related-content {
  padding: 15px;
}

/* Related post title styling */
.custom-related-blog .related-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Related post title link - black, no underline */
.custom-related-blog .related-title a {
  color: #000;
  text-decoration: none;
}

/* Related post title hover - primary color */
.custom-related-blog .related-title a:hover {
  color: var(--fs-color-primary);
}

/* Related post excerpt text */
.custom-related-blog .related-item p {
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/* =====================================================
   MOBILE RESPONSIVE - RELATED POSTS
   ===================================================== */

/* Tablet - 2 columns */
@media (max-width: 849px) {
  .custom-related-blog .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .custom-related-blog .related-thumb img {
    height: 180px;
  }
}

/* Mobile - 1 column */
@media (max-width: 549px) {
  .custom-related-blog .related-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   BUSINESS HOURS BANNER (Header)
   ===================================================== */

/* Business hours banner container - pill shape */
#header .bh-banner {
  display: inline-flex;
  align-items: center;
  background: #FFF;
  padding:2px;
  border-radius: 99px;
  overflow: hidden;
  color: var(--fs-color-primary);
  font-weight: 700;
  font-size: 14px;
}

/* Clock icon size */
#header .bh-banner .bh-icon-clock {
  width: 20px;
  height: 20px;
  color: #fff;
}

/* Days badge - pill shape with primary color background */
#header .bh-banner .bh-days{
  background: var(--fs-color-primary);
  border-radius: 99px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  color:#FFF;
  height: 100%;
}

/* Hours text - italic with horizontal margin */
#header .bh-text-hours{
  margin: 0px 10px !important;
  font-style: italic;
}

/* =====================================================
   MOBILE RESPONSIVE - HEADER
   Max width: 849px (Tablet and smaller)
   ===================================================== */

@media (max-width:849px){
  /* Reduce logo padding on mobile */
  #masthead #logo{
    padding: 10px;
  }
  /* Reduce logo max height on mobile */
  #logo img{
    max-height: 50px !important;
    margin:0px auto !important;
  }
  /* Hide decorative element behind logo on mobile */
  #masthead #logo:after{
    display: none;
  }
  /* Add subtle shadow to header on mobile */
  #header{
    box-shadow: 0px 0px 10px #dcdcdc;
  }
}

/* =====================================================
   MOBILE NAVIGATION ICONS
   ===================================================== */

/* Mobile nav icons - primary color */
.mobile-nav .header-search .icon-search,
.mobile-nav .nav-icon i{
  color: var(--fs-color-primary);
  font-size: 30px !important;
}

/* Mobile search icon - smaller than hamburger */
.mobile-nav .header-search .icon-search{
  font-size: 22px !important;
}

/* Search form button - primary color background */
.searchform .button.icon{
  background: var(--fs-color-primary);
  color: #FFF;
}

/* Search icon in button - white */
.searchform .button.icon .icon-search{
  color: #FFF;
}

/* =====================================================
   SIDEBAR MENU STYLES
   ===================================================== */

/* Sidebar menu font size */
.sidebar-menu{
  font-size: 16px;
}

/* Remove padding from topbar HTML widget in sidebar */
.sidebar-menu .html.custom.html_topbar_left{
  padding: 0px;
}

/* =====================================================
   CHILD THEME LOGO
   ===================================================== */

/* Logo in child theme - max height constraint */
.child-flatsome-logo img{
  max-height: 70px;
  width: auto;
}

/* =====================================================
   SOCIAL ICONS
   ===================================================== */

/* Social icons container - horizontal layout with gap */
.social-icons-wrap {
  display: inline-flex;
  gap: 15px;
  align-items: center;
}

/* Social icon link - circular orange background */
.social-icons-wrap a {
  width: 38px;
  height: 38px;
  background: #e85a24; /* Orange background */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s, opacity 0.3s;
}

/* Social icon hover effect - scale up */
.social-icons-wrap a:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Social icon SVG - white color */
.social-icons-wrap svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* Zalo text styling (Vietnamese messaging app) */
.social-icons-wrap .zalo-text {
  color: #fff;
  font-weight:700;
  font-size: 14px;
}

/* =====================================================
   CONTACT FORM STYLES (Contact Form 7)
   ===================================================== */

/* Remove line breaks from contact form */
.contact-form-template br{
  display: none;
}

/* Form control styling - rounded, gray background */
.contact-form-template .wpcf7-form-control{
  border: 0px;
  background: #F3F3F3 !important;
  border-radius: 20px;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 15px;
  max-height: inherit !important;
  height: auto !important;
  margin:0px 0px 10px 0px !important;
}
.contact-form-template select.wpcf7-form-control {
  color: #777 !important;
}
/* Submit button - primary color background, centered */
.contact-form-template .wpcf7-form-control.wpcf7-submit{
  background: var(--fs-color-primary) !important;
  margin: 10px auto !important;
  padding: 3px 25px;
  font-size: 15px;
  font-weight: 500;
 text-transform: none !important;
}

/* Center align form content */
.contact-form-template form{
  text-align: center;
}

/* Textarea height */
.contact-form-template .wpcf7-form-control.wpcf7-textarea{
  height:150px !important;
}

/* =====================================================
   CONTACT PAGE BACKGROUND
   ===================================================== */

/* Contact section background image */
.background-contact{
  background-image: url("assets/images/bg-contact.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
}

/* Contact box padding */
.box-contact{
  padding-bottom: 10px !important;
}

/* =====================================================
   CSS MENU
   ===================================================== */
.icon-menu-template .icon *{
  line-height: 0px !important;
}
.icon-menu-template .icon-box-img{
  width:15px !important;
}
.icon-menu-template img{
  padding: 0px;
  height: auto;
}
.header-nav .nav-dropdown{
  border:0px !important;
  border-radius: 10px !important;
  background:#fffffff2;
  padding: 0px 15px;
}
.max-width-1000 .sub-menu.nav-dropdown{
  max-width:1000px;
}
@media screen and (min-width: 850px){
  .column-mega-menu{
    flex-basis: 20%;
    max-width: 20%;
  }  
}

.header-nav{
  z-index: 100;
}
.menu-circle *{
  font-family: "Be Vietnam Pro", sans-serif;
}
.menu-circle a{
  color: #3c3c3c;
  font-weight: 400;
  display: block;
  position: relative;
  padding: 5px 5px 5px 30px;
}
.menu-circle a:hover{
  color: var(--fs-color-primary) !important;
}
.menu-circle a:before{
content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    background: #f6440c;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(0, -50%);
}
.nav-dropdown-has-arrow li.has-dropdown:after{
    border-color: hsl(0deg 0% 100% / 0%) hsl(0deg 0% 100% / 0%) #ffffff;
    border-width: 10px;
    margin-left: -10px;
    bottom: 0px;
}
.btn-primary-template *,
.btn-primary-template{
  color: var(--primary-color) !important;
}
.btn-primary-template:hover{
  background: var(--primary-color) !important;
  color: #FFF !important;
  box-shadow: none !important;
}
.btn-primary-template:hover *{
  color: #FFF !important;
}

.image-box-template .button i,
.image-box-template-ck .button i,
.btn-primary-template i{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #3cb74c;
  border-radius: 50%;
    font-size: 20px;
}
.image-box-template-small .button i {
    width: 22px !important;
    height: 22px !important;
    font-size: 18px !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.btn-primary-template i{
  color: #FFF !important;
}
.row-center{
  margin:0px auto !important;
}

.content-service-commit{
    background: #FFEEEE;
    border-radius: 99px;
    padding: 10px 40px;
    text-align: center;
    margin: 10px 0px 0px 0px;
    font-weight: 600;
    display: inline-block;
}
.content-service-commit *{
  margin:0px;
}
.image-box-template.box-push .box-text,
.image-box-template-ck.box-push .box-text{
  background: rgb(243 243 243 / 95%);
  border-radius: 15px;
  max-width:90% !important;
}

.image-box-template-small.box-push .box-text{
      background: rgb(243 243 243 / 95%);
}
.image-box-template .button,
.image-box-template-ck .button {
  background: linear-gradient(90deg, #f97316, #ef4444, #ec4899);
}

.button.contact-button:hover,
.button.contact-button{
  background: #FFF !important;
  color:#3cb74c !important;
  font-weight: 700;
}
.icon-box-left .icon-box-img, .icon-box-right .icon-box-img{
      max-width: inherit;
}
.icon-box-template{
  align-items: center;
}
.icon-box-template .icon-box-text{
  background: #FFF;
  border-radius: 25px;
  padding: 25px 25px 25px 45px !important;
}
.icon-box-template .icon-box-img{
  scale: 1.1;
}

.feature-box-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #f2f2f2;
    border-radius: 99px;
    padding-right: 20px;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #f97316;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    scale: 1.1;
}

.feature-text {
    font-size: 16px;
    font-style: italic;
    color: #333;
}

a.feature-box-inner:hover .feature-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

a.feature-box-inner:hover .feature-text {
    color: #f97316;
}


.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.link-arrow-text {
    font-style: italic;
}

.link-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #22c55e;
    border-radius: 50%;
    color: #fff;
}

.link-arrow:hover .link-arrow-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.link-arrow:hover .link-arrow-text {
    color: #22c55e;
}


@media screen and (max-width:849px){

  .icon-box-template .icon-box-img{
    scale: none;
    width:100% !important;
  }
  .icon-box-template .icon-box-text{
        border-radius: 10px;
        padding: 60px 15px 15px 15px !important;
        max-width: 95%;
        margin: -40px auto 0 auto !important; 
text-align: center; }
.center-mobile {
text-align: center;
}
}

.contact-bar-fixed {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 10px;
    background: linear-gradient(180deg, #ec4899, #f97316);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.contact-bar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.contact-bar-item:hover {
    transform: scale(1.1);
}

.contact-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-bar-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}


.back-to-top{
    bottom: 30% !important;
    right: 30px;
    width: 45px;
    height: 45px;
    color: #999 !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.back-to-top:hover{
  color: #FFF !important;
}

.tabs-template .tab-panels{
  margin-top: 35px;
}
.tabs-template ul.nav li.tab{
  padding: 10px;
}
.tabs-template ul.nav li.tab a{
  background: #FFF;
  border-width:1px;
  color: #000;
  padding: 3px 20px;
  border-radius: 99px;
  font-size: 14px;
}
.tabs-template ul.nav li.tab.active a{
  color: var(--fs-color-primary);
}

.slider-style-container .col {
    opacity: 1 !important;
}

.slider-style-container .flickity-slider > * {
    opacity: 1 !important;
    filter: none !important;
}

.slider-style-container .col:not(.is-selected) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

.slider-style-container .testimonial-box,
.slider-style-container .col .box {
    opacity: 1 !important;
}
.flickity-page-dots{
  bottom: -30px;
}

.section-content .flatsome-center-slider.fcs-initialized > .fcs-navigation > .fcs-nav-btn{
  background: #3cb74c !important;
  color: #FFF !important;
}
.section-content .flatsome-center-slider.fcs-initialized > .fcs-navigation > .fcs-nav-btn svg{
  stroke:#FFF !important;
}

b, strong{
  font-weight: 600;
}
.product-content-detail img{
  border-radius: 15px;
}


.woocommerce #review_form #respond p.form-submit input#submit, .woocommerce #reviews #comments ol.commentlist #respond p.form-submit input#submit, #comments a.btn-reviews-now{
  background: var(--fs-color-primary);
}
span.btn-attach,
span.devvn_stars_value i{
  color: #FFBB00;
}
span.devvn_num_reviews{
  color:#e24d1f;
}

.product-breadcrumb-container .woocommerce-breadcrumb{
    text-transform: inherit;
}


/* =====================================================
   FLATSOME CHILD PRODUCT STYLES
   ===================================================== */
.product-box .price,
.products .price,
.box-text .price,
.price-wrapper {
    display: none !important;
}

.product-box .add-to-cart-button,
.products .add_to_cart_button {
    display: none !important;
}

.quick-view-button {
    display: none !important;
}

.flatsome-product-card .products.row{
  justify-content: center;
}
/* Product Card Base */
.flatsome-product-card .product-small.col .col-inner {
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

/* Hide Badge */
.flatsome-product-card .badge-container {
    display: none !important;
}

/* Image Container */
.flatsome-product-card .box-image {
    position: relative;
    padding-top: 100% !important;
}

.flatsome-product-card .box-image .image-fade_in_back {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    display: block;
    width: 100%;
}

.flatsome-product-card .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    transition: transform 0.3s ease;
    display: block;
}

/* Hide Image Tools */
.flatsome-product-card .image-tools {
    display: none !important;
}

/* Text Box */
.flatsome-product-card .box-text {
    background: #F3F3F3;
}

.flatsome-product-card .box-text .title-wrapper {
    margin-bottom: 0;
}

.flatsome-product-card .product-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

.flatsome-product-card .product-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.flatsome-product-card .product-title a:hover {
    color: var(--fs-color-primary);
}

.mfp-content{
  border-radius: 0px 15px 15px 0px;
}
.nav-sidebar.nav-vertical li.header-search-form{
  border-top:0px !important;
}

.phone-callnow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-weight: 700;
    font-size: 16px;
}
.phone-callnow img{
  margin-right: 5px;
  max-width:34px;
}
.mfp-container .html.custom.html_topbar_right{
  margin-top:30px;
  border:0px !important;
}

/* =====================================================
   FLATSOME CHILD PRODUCT STYLES
   ===================================================== */

.info-grid {
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    gap: 6px 15px !important;
    align-items: baseline !important;
    width: 100% !important;
}

.info-label, 
.info-content {
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.info-label {
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.info-content {
    word-break: break-word;
}

@media (max-width: 767px) {
    .info-grid {
        gap: 6px 10px !important;
    }
}


.image-box-template .button i, .image-box-template-ck .button i, .btn-primary-template i {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #3cb74c;
    border-radius: 50%;
    font-size: 20px;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.large-group {
	background-color: rgb(255, 238, 239);
	border-radius:15px;
}
.italic {
	font-style: italic;
}

#masthead .header-nav .menu-item.nav-button.circle > a {
    padding: 0 !important; 
    width: 42px !important;  
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


#masthead .header-nav .menu-item.nav-button.current-menu-item > a img,
#masthead .header-nav .menu-item.nav-button > a:hover img {
    filter: brightness(0) invert(1) !important;
}
ul.links li a {
    color: #7C7B7B;
}
ul.page-numbers.nav-pagination {
    max-width: 700px;
    text-align: right;
    margin: 10px auto;
}
.nav-pagination > li > a, .nav-pagination > li > span {    border-width: 1px; }
.product-small .col-inner {
    overflow: visible !important;
    z-index: 1 !important;
}
.image-box-template {
    aspect-ratio: 1 / 1;
    position: relative !important;
    overflow: visible !important; 
    margin-bottom: 30px; 
}
.image-box-template .box-text {
    position: absolute !important;
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    bottom: -30px !important; 
    z-index: 10;
    padding: 15px;
    top: auto !important;
    height: auto !important;
}

ul.nav.nav-outline {
    max-width: 750px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.box-text.box-text-products {
    padding: 20px 12px 20px !important; 
    height: auto !important;
    border-radius: 25px;
    z-index: 10 !important;
    margin-top: -40px; 
}
 .box-text .product-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.single.single-post .custom-products-slider .container {
    max-width: 850px;
}
.related-grid-products .box-text {
    background: #F3F3F3;
}

.related-grid-products .product-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}
.copyright-footer {
	padding-top: 4px;
}
.custom-related-blog .box-text{
	padding: 15px;
}
.box-blog-post .is-divider {
	display:none;
}
.custom-related-blog .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    min-height: calc(1.5em * 2); /* luôn chiếm 2 dòng */
    margin-bottom: 12px;
}
.custom-related-blog .box-blog-post {
    background: #f3f3f3;
    border-radius: 30px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.custom-related-blog .box-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #4caf50;
}
/* Wrapper testimonial */
.testimonial-box {
    position: relative;
    padding-top: 60px; /* chừa chỗ cho avatar */
}

.testimonial-box .icon-box-text {
    background: #fff;
    border-radius: 22px;
    padding: 74px 20px 5px;
}

/* Avatar */
.testimonial-box .testimonial-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    padding: 10px;
    z-index: 2;
}


.testimonial-box .testimonial-text {
    font-style: normal !important;
}

/* Nội dung */
.testimonial-box .testimonial-text p {
    color: #555;
    line-height: 1.6;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .testimonial-box .icon-box-text {
        padding: 65px 10px 10px;
    }

}
/* =========================================
   STYLE DOTS (FIX KHOẢNG CÁCH)
   ========================================= */

/* 1. Xử lý khung chứa (Container) */
.flatsome-child-product .col-inner {
    /* Tạo khoảng trống vừa đủ ở đáy để chứa dots */
    padding-bottom: 20px !important; 
    position: relative !important;
}

/* 2. Triệt tiêu khoảng cách thừa của lưới sản phẩm (NGUYÊN NHÂN CHÍNH) */
.flatsome-child-product .products.row {
    margin-bottom: 0 !important; /* Bỏ margin mặc định của theme để dots không bị đẩy xa */
}

/* 3. Đưa dots vào vị trí chuẩn */
.custom-dots-nav.flickity-page-dots {
    /* Định vị tuyệt đối */
    position: absolute !important;
    bottom: 7px !important; /* Cách đáy khung 5px -> Số càng to thì dots càng bay lên cao */
    left: 0 !important;
    width: 100% !important;
    
    /* Căn giữa */
    display: block !important;
    text-align: center !important;
    
    /* Reset style */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 20;
    line-height: 1;
}

/* 4. Style hình dáng Dots (Giữ nguyên như cũ) */
.custom-dots-nav .dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 2px solid #d1d1d1 !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-dots-nav .dot.is-selected,
.custom-dots-nav .dot.active {
    background: #333 !important;
    border-color: #333 !important;
}

/* --- Responsive (Giữ nguyên) --- */
.flatsome-child-product .slider-nav-btn { display: none !important; }
.flatsome-child-product .custom-dots-nav { display: block !important; }

@media (min-width: 768px) {
    .flatsome-child-product .slider-nav-btn { display: flex !important; }
    .flatsome-child-product .custom-dots-nav { display: none !important; }
    .flatsome-child-product .col-inner { padding-bottom: 0 !important; }
    .flatsome-child-product .products.row { margin-bottom: 30px !important; } /* Trả lại margin cho PC */
}
@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: 1fr;  
    }
	#footer .footer-template .row-footer:before {
    bottom: calc(100% + 5px);
    left: -22px;
	}
	.flatsome-product-card .product-title a {
		font-size: 11px;
	}
	.box-text.box-text-products{
	padding:  10px !important;
    margin-top: -25px;
   border-radius: 12px;
	}
	.is-divider.divider {
        max-width: 100% !important;
    }
	.flatsome-product-card .box-image img {

    border-radius: 12px;
	}
.products.row-small > .col {
    padding: 0 5.8px 19.6px !important;
}
}
@media (max-width: 849px) {
    .header-top {
        display: none !important;
    }
}
/* 
   CSS CHO PC & CÁC QUY TẮC CHUNG
    */

.product-title.product_title.entry-title {
    color: rgb(239, 81, 32);
}

.off-canvas .nav-sidebar .sub-menu li a,
.off-canvas .nav-sidebar .children li a {
    color: #e34c25 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.custom-featured-box {
    background-color: rgb(255, 238, 239);
    padding: 25px 10px 10px 10px;
    position: relative;
    border-radius: 35px;
}
.my-block {
  margin-top: 30px;
  margin-bottom: 30px;
  clear: both;
}
.custom-featured-title {
    font-size: 1.8rem;
    text-align: center;
    color: rgb(239, 81, 33);
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

.product-gallery-video {
    position: relative;
}

.video-overlay,
.video-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.video-play-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.video-play-icon-small {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.product-video-thumb {
    cursor: pointer;
    position: relative;
}

.title-overlay {
    display: none;
}

.image-box-template-ck .box-image {
    aspect-ratio: 11/10;
    border-radius: 30px;
}

.image-box-template-ck .box-image > div {
    height: 100%;
}

.image-box-template-ck .box-image img {
    height: 100%;
    object-fit: cover;
}

.category-image {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    height: auto;
    border-radius: 30px;
}

.post-tags {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.post-tags a {
    font-size: 14px;
    background-color: #e6e6e6;
    color: #666;
    padding: 4px 18px;
    border-radius: 6px;
    font-weight: 500;
}

.post-tags a::before {
    content: "#";
    margin-right: 2px;
}

.post-tags a:hover {
    background-color: #d0d0d0;
    color: #333;
}

.flickity-page-dots {
    bottom: -25px;
}

.background-contact {
    background-image: linear-gradient(to bottom, transparent 40%, rgba(239, 81, 33, 0.6)), url("/wp-content/themes/flatsome-child/assets/images/bg-contact.png");
    background-position: center center !important;
}

.flatsome-center-slider .box-image img,
.flatsome-center-slider .box-image a {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* 
   CSS DÀNH RIÊNG CHO MOBILE & TABLET
 */

@media (min-width: 550px) {
    .custom-featured-box {
        padding: 35px 70px 30px 70px;
    }
}

@media (max-width: 849px) {
    .product-thumbnails .flickity-viewport {
        height: 85px !important;
        min-height: 0 !important;
        overflow: hidden;
    }
    .product-thumbnails img {
        margin-bottom: 0px;
    }
    #footer .footer-template:after {
        content: "";
        position: absolute;
        top: 0px;
        left: -50px;
        width: 100%;
        height: 100%;
        background-image: url(/wp-content/themes/flatsome-child/assets/images/footer03.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }
}

@media (max-width: 768px) {
    /* Nhóm 1: Thanh Contact & Slider */
    .contact-bar-fixed {
        top: auto;
        bottom: 100px;
        right: 15px;
        transform: none;
        touch-action: none;
        cursor: grab;
    }
    .contact-bar-fixed.dragging {
        cursor: grabbing;
    }
    .flatsome-center-slider {
        touch-action: pan-y;
    }
    .flatsome-center-slider.fcs-initialized > .fcs-navigation {
        display: none !important;
    }

    /* Nhóm 2: Nội dung & Text */
    .content-service-commit {
        padding: 5px 30px;
        font-size: 12px;
        line-height: 12px;
    }
    .text-quy-trinh {
        font-size: 11px !important;
        line-height: 12px;
    }
    .box-quy-trinh .box-image {
        width: 85% !important;
    }

    /* Nhóm 3: Product Card & Dots */
    .flatsome-child-product .products .col-inner {
        padding-bottom: 0px !important;
        position: relative !important;
    }
    .custom-featured-box .flickity-page-dots {
        bottom: 15px !important;
    }
    .flatsome-product-card .custom-dots-nav.flickity-page-dots {
        bottom: 40px !important;
    }
    .flatsome-child-product.flatsome-product-card .custom-dots-nav.flickity-page-dots {
        bottom: 20px !important;
    }

    /* Nhóm 4: Blog & Tabs */
    .blog-wrapper .row-archive-blog #post-list .post-item a.button {
        display: none;
    }
    .blog-wrapper .row-archive-blog #post-list .post-item:first-child .post-title {
        width: 85%;
    }
    .blog-wrapper .row-archive-blog #post-list .post-item:first-child .img-share-wrapper .img-share-btn {
        top: 82% !important;
        right: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    .tabs-template ul.nav li.tab {
        padding: 5px;
    }
    .tabs-template ul.nav li.tab a {
        border-width: 2px;
        padding: 0px 6px;
        border-radius: 50px;
        font-size: 12px;
    }

    /* Nhóm 5: Image Box (Từ ảnh bạn gửi) */

    .image-box-template .box-text {
        bottom: 0px !important;
        padding: 15px;
    }
    .image-box-template2.image-box-template.box-push .box-text {
        max-width: 90% !important;
        bottom: -40px !important;
    }
	body.archive .blog-wrapper.blog-archive .archive-page-header
 {
    padding-top: 35px;
    padding-bottom: 20px;
}
	body.single.single-post #content .entry-title {
    margin-bottom: 20px;
    margin-top: 20px;
}
	.my-block {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
.button-sidebar-white.button span {
    -webkit-line-clamp: 4;
}