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

/* Subheader banner */
#subheader {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 200px;
  margin-bottom: 1.5rem;
  isolation: isolate;
  /* ensure ::before overlay stays within stacking context */
}

#subheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45));
  z-index: 0;
  /* under content */
}

.hv-subheader-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 16px 40px;
  text-align: center;
  position: relative;
  z-index: 1;
  /* above overlay */
}

.hv-subheader-title {
  color: #fff;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.hv-breadcrumbs {
  display: block;
}

.hv-crumb {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
}

.hv-crumb li {
  display: inline-block;
  margin-left: 0 !important;
  margin-right: 0;
}

.hv-crumb .sep {
  margin: 0 8px;
  opacity: .9;
}

.hv-crumb .divider {
  display: inline-block;
  margin: 0;
}

.hv-crumb a {
  color: #fff;
  text-decoration: none;
}

.hv-crumb a:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  #subheader {
    min-height: 200px;
  }

  .hv-subheader-inner {
    padding-top: 70px;
  }
}

@media (max-width: 600px) {
  .hv-subheader-inner {
    padding-top: 50px;
  }

  .hv-subheader-title {
    font-size: 32px;
  }
}

/* Hide WooCommerce shop/category page title (using subheader banner instead) */
.shop-page-title.category-page-title.page-title,
.shop-page-title.page-title {
  display: none;
}

/* Hide archive page header (using subheader banner instead) */
.archive-page-header {
  display: none;
}

/* Hide divider in blog posts */
.post-item .is-divider,
.blog-post-inner .is-divider {
  display: none;
}

/* Hide topbar on desktop, show on mobile */
.header-top.hide-for-sticky {
  display: none;
}

@media (max-width: 849px) {
  .header-top.hide-for-sticky {
    display: block;
  }
}

/* Increase right elements width */
.header-inner .flex-col.hide-for-medium.flex-right {
  flex: 1 1 auto;
  min-width: 0;
}

.header-inner .flex-col.hide-for-medium.flex-right .header-nav {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Fix sub menu alignment - ensure items are aligned properly */
.nav-dropdown.nav-dropdown-default {
  padding: 20px !important;
}

.nav-dropdown.nav-dropdown-default>li {
  margin: 0 !important;
  padding: 0 !important;
}

.nav-dropdown.nav-dropdown-default>li>a {
  padding: 10px 20px !important;
  margin: 0 !important;
  text-align: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
}



/* Flatsome Related Posts Widget Styles */
.widget.flatsome-related-posts .widget-title {
  font-family: Roboto, "Open Sans", Arial, Helvetica, Geneva, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgb(0, 108, 65);
  font-size: 26px;
  line-height: 31px;
}

.widget.flatsome-related-posts .widget-title+.is-divider {
  display: none;
}

/* Category card layout: Title -> Image -> Price list links */
.products .product-category .col-inner {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Make Flatsome category box vertical and move title before image */
/* Reset Flatsome box layout to default and manage title outside the box */
.products .product-category .box {
  display: block;
}

.products .product-category .box .box-text {
  order: initial;
  margin-bottom: 0;
}

.products .product-category .box .box-image {
  order: initial;
  margin-bottom: 1rem;
}

/* Light border wrapper for each category card */
.products .product-category .col-inner {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px 12px 16px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.products .product-category .col-inner:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Light border wrapper for each product card (match category) */
.products .product-small .col-inner {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px 12px 16px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.products .product-small .col-inner:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Product layout: title outside, image in box, buttons after box (like category) */
.products .product-small .title-above-box {
  margin-bottom: 0.5rem;
  text-align: center;
}

.products .product-small .box {
  display: block !important;
  /* Reset flex, use default Flatsome layout */
}

/* Force image to display in all contexts (category, sub category, shop) */
.products .product-small .box .box-image,
.products .product-small .box-image,
.woocommerce .products .product-small .box .box-image,
.woocommerce .products .product-small .box-image,
.tax-product_cat .products .product-small .box .box-image,
.tax-product_cat .products .product-small .box-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: auto !important;
}

.products .product-small .box .box-image img,
.products .product-small .box-image img,
.woocommerce .products .product-small .box .box-image img,
.tax-product_cat .products .product-small .box .box-image img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}

.products .product-small .box .box-text {
  display: none !important;
  /* Hide box-text since title is outside */
}

/* Shop loop product title typography */
.products .product-small .product-title a,
.products .product-small .woocommerce-loop-product__title,
.products .product-small .woocommerce-loop-product__title a {
  font-family: Roboto, "Open Sans", Arial, Helvetica, Geneva, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #393f42;
  font-size: 20px;
  line-height: 24px;
}

.products .product-small .product-title a:hover,
.products .product-small .woocommerce-loop-product__title a:hover {
  color: rgb(0, 108, 65);
}

/* Price list links styling */
.products .product-category .hv-cat-pricelists {
  order: 1;
  margin-top: 0;
}

.products .product-category .hv-cat-pricelists .btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 0.5rem;
  padding: 10px 16px;
  background: #ED1F24;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s ease-in-out, opacity 0.2s;
}

.products .product-category .hv-cat-pricelists .btn-download:hover {
  background: #A8181B;
  text-decoration: none;
  color: #fff;
}

/* Font Awesome download icon on the right */
.products .product-category .hv-cat-pricelists .btn-download:after {
  content: "\f019";
  /* fa-download */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* solid */
  display: inline-block;
  margin-left: 6px;
}

/* ============================================================================
   SHOP LOOP PRODUCT BUTTONS
   ============================================================================ */

.hv-product-actions {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.hv-product-actions.only-more {
  text-align: center;
}

.hv-product-actions .btn-view-price,
.hv-product-actions .btn-view-more {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  background: #ED1F24;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.2s ease;
}

/* Icons for product buttons */
.hv-product-actions .btn-view-price:after {
  content: "\f019";
  /* download */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 8px;
}

.hv-product-actions .btn-view-more:after {
  content: "\f061";
  /* arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 8px;
}

.hv-product-actions .btn-view-price:hover,
.hv-product-actions .btn-view-more:hover {
  background: #A8181B;
  color: #fff;
  text-decoration: none;
}

/* ============================================================================
   PRODUCT TABS STYLING
   ============================================================================ */

/* Tab icons */
.create-icon {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>') center center no-repeat;
  background-position: left 5px bottom 4px;
  background-size: 20px;
}

.setting-icon {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/></svg>') center center no-repeat;
  background-position: left 5px bottom 4px;
  background-size: 20px;
}

.image-icon {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') center center no-repeat;
  background-position: left 5px bottom 4px;
  background-size: 20px;
}

.ribbon-icon {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 7l2 12h12l2-12M4 7V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"/></svg>') center center no-repeat;
  background-position: left 5px bottom 4px;
  background-size: 20px;
}

.create-icon:hover .nav-link.active,
.create-icon .nav-link.active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23006C41"><path d="M12 5v14M5 12h14"/></svg>');
}

.setting-icon:hover .nav-link.active,
.setting-icon .nav-link.active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23006C41"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/></svg>');
}

.image-icon:hover .nav-link.active,
.image-icon .nav-link.active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23006C41"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
}

.ribbon-icon:hover .nav-link.active,
.ribbon-icon .nav-link.active {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23006C41"><path d="M4 7h16M4 7l2 12h12l2-12M4 7V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"/></svg>');
}

/* Tab navigation styling */
.hv-product-tabs {
  background: #F8F8F8;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
}

.hv-product-tabs .nav-item {
  display: inline-block;
  margin-right: 1rem;
}

.hv-product-tabs .nav-link {
  padding: 4px 15px 3px 35px;
  color: #444444;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  display: block;
}

.hv-product-tabs .nav-link:hover {
  color: #ED1F24;
}

.hv-product-tabs .nav-link.active {
  color: #ED1F24 !important;
  background-color: transparent !important;
}

/* Tab content */
.tab-content .tab-pane {
  display: none;
}

.tab-content .tab-pane.active {
  display: block;
}

@media (max-width: 414px) {
  .hv-product-tabs .nav-item:nth-child(1) {
    margin-bottom: 15px;
  }
}

/* Single product title */
.single-product .product-title.product_title.entry-title {
  color: #ED1F24 !important;
  font-size: 20px !important;
}

/* ============================================================================
   FLATSOME/WOO DEFAULT TABS: RESTYLE TO MATCH PROVIDED DESIGN
   ============================================================================ */



/* RESET Flatsome tab styles & rebuild like Bootstrap pills */
.woocommerce-tabs .product-tabs {
  background: #F8F8F8 !important;
  border: 0 !important;
  border-radius: 4px;
  padding: .5rem !important;
  margin: 3rem 0 1rem !important;
  display: flex !important;
  flex-wrap: wrap;
  list-style: none;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.woocommerce-tabs .product-tabs.nav,
.woocommerce-tabs .product-tabs.nav-uppercase,
.woocommerce-tabs .product-tabs.nav-line {
  border: 0 !important;
  text-transform: none !important;
}

.woocommerce-tabs .product-tabs:before,
.woocommerce-tabs .product-tabs:after {
  display: none !important;
}

/* ============================================================================
   SUB CATEGORIES LAYOUT
   ============================================================================ */

/* Sub categories row - 3 columns desktop, 2 columns mobile */
.row-sub-tin-tuc {
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.row-sub-tin-tuc .box-text-inner p {
  position: relative;
  padding-left: 20px;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  margin: 0;
}

.row-sub-tin-tuc .box-text-inner p::before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.9;
  color: #fff;
}

.row-sub-tin-tuc .box-image img {
  transition: transform .35s ease, opacity .35s ease;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.row-sub-tin-tuc .box:hover .box-image img {
  transform: scale(1.05);
}

.row-sub-tin-tuc .box .overlay {
  background-color: rgba(0, 0, 0, 0.25) !important;
  transition: background-color .3s ease;
}

.row-sub-tin-tuc .box:hover .overlay {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

.row-sub-tin-tuc .box-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.row-sub-tin-tuc .box-text-top.box-overlay .box-text,
.row-sub-tin-tuc .box-text-top.box-shade .box-text,
.row-sub-tin-tuc .box-text {
  bottom: auto !important;
  left: 10px !important;
  position: absolute;
  right: 0;
  top: 10px !important;
  z-index: 16;
  padding: 0 !important;
  pointer-events: none;
}

.row-sub-tin-tuc .box-text-inner {
  padding: 0 !important;
}

.row-sub-tin-tuc .box:hover .box-text-inner p,
.row-sub-tin-tuc .box:hover .box-text-inner p::before {
  color: #fff;
}

.woocommerce-tabs .product-tabs li {
  display: inline-block !important;
  margin: 0 1.5rem .25rem 0 !important;
  border: 0 !important;
}

.woocommerce-tabs .product-tabs a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #444 !important;
  border-radius: .25rem !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.woocommerce-tabs .product-tabs a:hover {
  color: #ED1F24 !important;
}

.woocommerce-tabs .product-tabs li.active a {
  color: #ED1F24 !important;
  background-color: #F8F8F8 !important;
}

/* Use Font Awesome icons with high specificity to override defaults */
.woocommerce-tabs .product-tabs.nav-line>li>a:before,
.woocommerce-tabs .product-tabs>li>a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  display: inline-block !important;
  margin-right: 8px;
  color: currentColor;
  position: static !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
}

/* Mô tả -> write (edit) */
#tab-title-description a:before {
  content: "\f044" !important;
}

/* Thông số kỹ thuật -> cog */
#tab-title-technical_specs a:before {
  content: "\f013" !important;
}

/* Hình ảnh -> image */
#tab-title-images a:before {
  content: "\f03e" !important;
}

/* Chứng nhận -> certificate */
#tab-title-certifications a:before {
  content: "\f0a3" !important;
}

/* Bảng giá -> price tag */
#tab-title-price_list a:before {
  content: "\f02b" !important;
}

/* ============================================================================
   GTRANSLATE CUSTOM STYLES
   ============================================================================ */

/* Change "Vietnamese" to "Tiếng Việt" in all instances using CSS */
[class*="gt_container"] .gt_switcher a[data-gt-lang="vi"],
[class*="gt_container"] .gt_switcher a[data-gt-lang="vi"] span {
  font-size: 0 !important;
}

[class*="gt_container"] .gt_switcher a[data-gt-lang="vi"]:after {
  content: "Ti\1EBFng Vi\1EC7t" !important;
  font-size: 12pt !important;
  margin-left: 4px;
  vertical-align: middle;
  display: inline !important;
}

/* Keep wrapper container in place - prevent it from moving */
.gtranslate_wrapper[class*="gt_container"] {
  position: static !important;
  display: inline-block !important;
}

/* Fix dropdown direction - dropdown appears below selected */
[class*="gt_container"] .gt_switcher {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

/* Selected item styling - normal flow, doesn't move */
[class*="gt_container"] .gt_switcher .gt_selected {
  position: relative !important;
  z-index: 9999 !important;
}

/* Dropdown styling - position it below selected item */
[class*="gt_container"] .gt_switcher .gt_option {
  position: absolute !important;
  left: 0 !important;
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  z-index: 9998 !important;
  margin: 0 !important;
}

/* When gt_option is BEFORE gt_selected in DOM (default GTranslate order) */
/* We use transform to move it below */
[class*="gt_container"] .gt_switcher .gt_option:first-child {
  top: 0 !important;
  transform: translateY(100%) !important;
}

/* When gt_option is AFTER gt_selected in DOM */
[class*="gt_container"] .gt_switcher .gt_selected+.gt_option {
  top: 100% !important;
  transform: none !important;
}

/* ============================================================================
   HEADER MENU - BOLD TEXT
   ============================================================================ */

/* Make header navigation menu text bolder - exclude GTranslate */
.header-nav a:not([class*="gt_"]):not([data-gt-lang]),
.header-bottom-nav a:not([class*="gt_"]):not([data-gt-lang]),
.nav-top-link:not([class*="gt_"]):not([data-gt-lang]) {
  font-weight: 700 !important;
}

/* Ensure GTranslate text stays normal weight */
[class*="gt_container"] a,
[class*="gt_container"] .gt_switcher a {
  font-weight: normal !important;
}

/* ============================================================================
   HOME POSTS HOVER EFFECT
   ============================================================================ */

/* Add transition for smooth hover effect */
.xc-home-posts .post-item .box-blog-post {
  transition: all 0.3s ease;
}

/* Hover effect: red background, white text, shadow, lift up */
.xc-home-posts .post-item .box-blog-post:hover {
  background-color: #ed1f24 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-10px) !important;
}

/* Change title color to white on hover */
.xc-home-posts .post-item .box-blog-post:hover .post-title,
.xc-home-posts .post-item .box-blog-post:hover .post-title a {
  color: #ffffff !important;
}

/* Change excerpt/description color to white on hover */
.xc-home-posts .post-item .box-blog-post:hover .from_the_blog_excerpt {
  color: #ffffff !important;
}

/* Change divider color to white on hover */
.xc-home-posts .post-item .box-blog-post:hover .is-divider {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   FOOTER WAVE ANIMATION - VERTICAL MOVEMENT
   ============================================================================ */

/* Wave animation keyframe - gentle up and down movement */
@keyframes wave-vertical {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Change one wave to red color for contrast */
.xc-footer .ux-shape-divider--top path:nth-child(3) {
  fill: #ed1f24 !important;
  opacity: 1 !important;
}

/* Apply vertical floating animation to each wave layer */
.xc-footer .ux-shape-divider--top path:nth-child(1) {
  animation: wave-vertical 8s ease-in-out infinite;
}

.xc-footer .ux-shape-divider--top path:nth-child(2) {
  animation: wave-vertical 7s ease-in-out infinite;
  animation-delay: -1s;
}

.xc-footer .ux-shape-divider--top path:nth-child(3) {
  animation: wave-vertical 6s ease-in-out infinite;
  animation-delay: -2s;
}

.xc-footer .ux-shape-divider--top path:nth-child(4) {
  animation: wave-vertical 5s ease-in-out infinite;
  animation-delay: -3s;
}

.xc-footer .ux-shape-divider--top path:nth-child(5) {
  animation: wave-vertical 4s ease-in-out infinite;
  animation-delay: -4s;
}

/* ============================================================================
   TUYỂN DỤNG - CUSTOM META FIELDS STYLING
   ============================================================================ */

/* Tuyển dụng item equal height */
.tuyen-dung-item {
  display: flex;
  flex-direction: column;
}

.tuyen-dung-item .col-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tuyen-dung-item .box-blog-post {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tuyen-dung-item .box-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tuyen-dung-item .box-text-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title always 2 lines */
.tuyen-dung-item .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: calc(1.4em * 2);
  margin-bottom: 10px;
}

/* Meta fields container */
.tuyen-dung-meta {
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Individual meta item */
.tuyen-dung-meta .meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

/* Icon styling - All icons red color */
.tuyen-dung-meta .meta-item i {
  margin-right: 8px;
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #ed1f24;
}

/* View Details Button */
.tuyen-dung-btn-wrapper {
  margin-top: 15px;
}

.tuyen-dung-btn-detail {
  display: inline-flex;
  align-items: center;
  color: #ed1f24;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tuyen-dung-btn-detail i {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.tuyen-dung-btn-detail:hover {
  color: #c71a1f;
}

.tuyen-dung-btn-detail:hover i {
  transform: translateX(5px);
}

/* Status label - temporarily hidden */
.tuyen-dung-status {
  display: none !important;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ed1f24;
  color: white;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 10;
}

/* Tuyển dụng archive spacing */
.tuyen-dung-archive .row {
  margin-top: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tuyen-dung-meta .meta-item {
    font-size: 13px;
  }

  .tuyen-dung-meta .meta-item i {
    font-size: 14px;
  }
}

/* ============================================================================
   TIN TỨC - POST ITEMS STYLING (for other categories)
   ============================================================================ */

/* Add border and padding to all post items */
.post-item:not(.tuyen-dung-item) .box-blog-post {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  padding: 20px;
}

/* Title always 2 lines */
.post-item:not(.tuyen-dung-item) .post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: calc(1.4em * 2);
  margin-bottom: 10px;
}

/* Excerpt always 2 lines */
.post-item:not(.tuyen-dung-item) .from_the_blog_excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  height: calc(1.5em * 2);
  margin-bottom: 0;
}

/* "Xem thêm" button styling (added via JS) */
.post-item:not(.tuyen-dung-item) .post-read-more {
  display: inline-flex;
  align-items: center;
  color: #ed1f24;
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.post-item:not(.tuyen-dung-item) .post-read-more i {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.post-item:not(.tuyen-dung-item) .post-read-more:hover {
  color: #c71a1f;
}

.post-item:not(.tuyen-dung-item) .post-read-more:hover i {
  transform: translateX(5px);
}

/* ============================================================================
   SUBHEADER - INCREASE MIN HEIGHT
   ============================================================================ */

#subheader {
  min-height: 500px !important;
}

/* ============================================================================
   PRICE LIST - CHANGE BORDER COLOR
   ============================================================================ */

.hv-price-list {
  border-top: 5px solid #ed1f24 !important;
}

/* ============================================================================
   NAVIGATION DROPDOWN - REDUCE MIN WIDTH
   ============================================================================ */

.nav-dropdown {
  min-width: 200px !important;
}

/* ============================================================================
   PRODUCT ACTIONS - PRICE BUTTONS ON SAME LINE
   ============================================================================ */

/* ============================================================================
   PRODUCT ACTIONS - PRICE BUTTONS
   ============================================================================ */

/* Default: Horizontal (side-by-side) */
.hv-product-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.hv-product-actions .btn-view-price {
  white-space: nowrap !important;
  width: auto !important;
  margin: 0 4px !important;
}

/* Related Products ONLY: Vertical Layout (One per line) */
.related-products-wrapper .hv-product-actions {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  padding: 0 5px;
  box-sizing: border-box;
}

.related-products-wrapper .hv-product-actions .btn-view-price {
  width: 100% !important;
  /* Full width */
  margin: 2px 0 !important;
  /* Spacing between buttons */
  font-size: 12px !important;
  /* Smaller font */
  padding: 6px 5px !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On mobile, allow wrapping generally */
@media (max-width: 768px) {
  .hv-product-actions {
    flex-wrap: wrap !important;
  }
}

/* ============================================================================
   RELATED PRODUCTS SPACING
   ============================================================================ */
.related-products-wrapper .product-small .col-inner {
  margin: 5px;
  /* Add margin to separate items */
  width: calc(100% - 10px);
  /* Adjust width for margin */
}

/* ============================================================================
   TAB ICONS - SPECIFIC ID TARGETING
   ============================================================================ */

/* Common styles for all tab icons */
#tab-title-description a:before,
#tab-title-technical_specs a:before,
#tab-title-images a:before,
#tab-title-certifications a:before,
#tab-title-price_list a:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  display: inline-block !important;
  margin-right: 4px !important;
  /* Closer to text (was 8px) */
  font-size: 18px !important;
  /* Larger icon */
  color: #ED1F24 !important;
  /* Force red color */
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  content: "" !important;
}

/* Specific icons per tab */
#tab-title-description a:before {
  content: "\f044" !important;
}

#tab-title-technical_specs a:before {
  content: "\f013" !important;
}

#tab-title-images a:before {
  content: "\f03e" !important;
}

#tab-title-certifications a:before {
  content: "\f0a3" !important;
}

#tab-title-price_list a:before {
  content: "\f02b" !important;
}