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

.absolute-footer.dark,
.dark .nav-vertical li li.menu-item-has-children>a,
.dark .nav-vertical-fly-out>li>a,
.dark .nav-vertical>li>ul li a,
.dark .nav>li.html,
.dark .nav>li>a,
.nav-dark .is-outline,
.nav-dark .nav>li>a,
.nav-dark .nav>li>button,
.nav-dropdown.dark .nav-column>li>a,
.nav-dropdown.dark>li>a,
.dark,
.dark p,
.dark td {
   color: #ffffff;
}

.nav-dropdown-simple .nav-column li>a:hover,
.nav-dropdown.nav-dropdown-simple>li>a:hover {
   background: #ffffff;
   color: #de6437;
}

.fs-12 {
   font-size: 13px;
}

.footer-wrapper .section-title-container {
   margin-bottom: 0;
}

.dark .section-title-normal,
.dark .section-title-normal span {
   border-color: #fff;
}

.section-title-normal span {
   border-bottom: 0;
   padding-bottom: 0;
}

/* Left Column Content */
.gioi-thieu-left h3 {
   color: #d9a32b;
   font-weight: bold;
   display: flex;
   align-items: center;
   font-size: 1.2em;
}

.gioi-thieu-left .triangle {
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 12px solid #de6437;
   margin-right: 10px;
}

.gioi-thieu-left .section-title {
   color: #de6437;
   font-size: 2.8em;
   font-weight: bold;
   text-transform: uppercase;
   margin-top: 15px;
   margin-bottom: 20px;
}

.gioi-thieu-left p {
   line-height: 1.6;
}

/* Right Column Timeline */
.timeline-wrapper {
   position: relative;
   padding-left: 100px;
   /* Space for the years */
}

.timeline-wrapper::before {
   content: "";
   position: absolute;
   top: 15px;
   bottom: 15px;
   left: 124px;
   /* Position of the vertical line */
   width: 2px;
   background-color: #de6437;
}

.timeline-item {
   position: relative;
   margin-bottom: 35px;
   display: flex;
   align-items: center;
}

.timeline-item:last-child {
   margin-bottom: 0;
}

.timeline-year {
   position: absolute;
   left: -100px;
   /* Position year to the left of the line */
   top: 50%;
   transform: translateY(-50%);
   color: #de6437;
   font-weight: bold;
   font-size: 1.2em;
   width: 80px;
   text-align: right;
}

.timeline-icon {
   width: 30px;
   height: 30px;
   border: 2px solid #de6437;
   border-radius: 50%;
   background-color: #fff;
   position: absolute;
   left: 8px;
   /* Center icon on the line */
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
}

.timeline-icon i {
   color: #de6437;
   font-size: 14px;
}

.timeline-content {
   margin-left: 55px;
   /* Space from the line */
   border: 1px solid #de6437;
   padding: 15px 20px;
   border-radius: 10px;
   background-color: #fff;
   width: 100%;
}

.timeline-content p {
   margin: 0;
   line-height: 1.6;
}

/* Video Popup Styling */
.video-popup {
   display: none;
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
   z-index: 1000;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   /* Enable scroll if needed */
   background-color: rgba(0, 0, 0, 0.8);
   /* Black w/ opacity */
}

.video-popup-content {
   position: relative;
   margin: auto;
   padding: 20px;
   width: 80%;
   max-width: 800px;
   top: 50%;
   transform: translateY(-50%);
}

.video-popup-content iframe {
   width: 100%;
   height: 450px;
   /* Adjust height as needed */
}

.close-popup {
   color: #fff;
   position: absolute;
   top: -20px;
   right: 0;
   font-size: 35px;
   font-weight: bold;
   cursor: pointer;
}

.close-popup:hover,
.close-popup:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

.timeline-icon-link .timeline-icon {
   transition: transform 0.3s ease;
}

.timeline-icon-link:hover .timeline-icon {
   transform: scale(1.2);
   cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 849px) {
   .timeline-content {
      width: auto;
   }

   .timeline-wrapper {
      padding-left: 0;
      margin-top: 40px;
   }

   .timeline-wrapper::before {
      left: 14px;
      /* Move line to the far left */
   }

   .timeline-year {
      position: static;
      transform: none;
      text-align: left;
      width: auto;
      margin-bottom: 10px;
      padding-left: 45px;
   }

   .timeline-item {
      flex-direction: column;
      align-items: flex-start;
   }

   .timeline-icon {
      left: 0;
      top: 35px;
   }

   .timeline-content {
      margin-left: 45px;
      margin-top: 0;
   }
}

.bg-slide-bottom {
   background-image: url("/wp-content/uploads/2025/07/vien_cong-1-scaled.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   height: auto;
   width: 100%;
   position: relative;
   z-index: 1000;
   bottom: -36px;
}

.button-scroll {
   position: absolute;
   bottom: 65px;
   left: 47%;
   z-index: 9999;
}

.button-scroll span {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}

.home-slider .flickity-page-dots {
   bottom: 135px;
   z-index: 3000;
}

/* --- Timeline Section --- */
.timeline-section {
   background-color: #c87043;
   width: 100%;
   padding: 60px 0;
   position: relative;
}

.section-header {
   color: white;
   margin-bottom: 80px;
   /* Increased space for the timeline */
}

.section-header h4 {
   margin: 0;
   font-weight: 300;
   letter-spacing: 1px;
   opacity: 0.8;
}

.section-header h1 {
   margin: 5px 0 0 0;
   font-size: 2.5rem;
   font-weight: 700;
}

/* --- Swiper and Timeline Bar --- */
.timeline-swiper {
   width: 90%;
   max-width: 1200px;
   margin: auto;
   position: relative;
   padding-top: 20px;
   /* Space for the timeline markers */
}

/* The main timeline bar */
.timeline-swiper::before {
   content: "";
   position: absolute;
   top: 20px;
   left: 0;
   right: 0;
   height: 2px;
   background-color: rgb(237, 169, 67);
   z-index: 1;
   /* Set a lower stacking order */
}

/* Ensure the slide container is on top of the line */
.timeline-swiper .swiper-wrapper {
   position: relative;
   /* z-index only works on positioned elements */
   z-index: 2;
   /* Set a higher stacking order */
}

/* --- Individual Slide Styling --- */
.swiper-slide {
   text-align: center;
   color: white;
   padding: 0 15px;
   position: relative;
   /* Needed for marker positioning */
}

.timeline-marker {
   position: absolute;
   top: 20px;
   /* Position at the timeline bar */
   left: 50%;
   transform: translate(-50%, -50%);
   /* Center the icon perfectly */
   z-index: 10;
   color: white;
   background-color: rgb(222, 100, 55);
   /* Correct background color to match section */
   padding: 0 5px;
   /* Create space around the icon */
   font-size: 24px;
}

.timeline-slide-content {
   padding-top: 60px;
   /* Space for the marker */
}

.timeline-year2 {
   font-size: 1.8rem;
   font-weight: 700;
   margin-bottom: 15px;
}

.timeline-description {
   font-size: 1rem;
   line-height: 1.6;
   min-height: 120px;
   /* Adjust to keep slides aligned */
   opacity: 0.9;
}

.timeline-image {
   margin-top: 20px;
   width: 100%;
   height: 200px;
   background-color: black;
   /* Placeholder color */
   border-radius: 8px;
}

/* --- Swiper Navigation & Pagination --- */
.swiper-button-next,
.swiper-button-prev {
   color: white;
   top: 50%;
}

.swiper-pagination-bullet {
   background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-bullet-active {
   background: white;
}

/* Hide navigation on smaller screens if desired */
@media (max-width: 768px) {

   .swiper-button-next,
   .swiper-button-prev {
      display: none;
   }

   .timeline-description {
      min-height: auto;
      /* Remove fixed height on mobile */
   }
}

body #powerTip {
   background-color: #de6437;
   max-width: 300px;
}

body #powerTip .bg-red {
   background-color: red !important;
}

body #powerTip.n:before {
   border-top: 10px solid rgb(255, 252, 252);
}

body #powerTip.s:before {
   border-bottom: 10px solid #fff;
}

body #powerTip.e:before {
   border-right: 10px solid #fff;
}

body #powerTip.w:before {
   border-left: 10px solid #fff;
   right: -10px;
}

body #powerTip.ne:before,
body #powerTip.nw:before {
   border-top: 10px solid #fff;
   border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.se:before,
body #powerTip.sw:before {
   border-bottom: 10px solid #fff;
   border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.nw-alt:before,
body #powerTip.ne-alt:before,
body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
   border-top: 10px solid #fff;
   border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
   border-bottom: 10px solid #fff;
   border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body .box_view_html {
   color: #fff;
   font-size: 13px;
}

body .box_view_html span.close_ihp svg {
   fill: #de6437;
}

.linh-vuc h1,
.san-pham h1,
.mo-hinh h1,
.mo-hinh i,
.san-pham i {
   color: #de6437;
}

.mo-hinh h4,
.san-pham h4,
.linh-vuc h4 {
   color: #eda943;
}

.linh-vuc .col-inner .box {
   border-radius: 5%;
   border-bottom: 10px solid #eda943;
   background-color: rgb(237, 237, 237);
}

/* === Custom Contact Form 7 Style === */

/* Container chính của form */
.custom-contact-form {
   margin: 0 auto;
   font-size: 14px;
}

/* Bố cục cho các hàng */
.custom-contact-form .form-row {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -15px;
   /* Tạo khoảng cách giữa các cột */
}

/* Cột 2 bên */
.custom-contact-form .form-col {
   width: 50%;
   padding: 0 15px;
   box-sizing: border-box;
}

/* Cột đầy đủ chiều rộng */
.custom-contact-form .form-col-full {
   width: 100%;
   padding: 0 15px;
   box-sizing: border-box;
}

/* Kiểu chung cho các ô input, textarea */
.custom-contact-form .wpcf7-form-control {
   width: 100%;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #ccc;
   /* Đường gạch dưới */
   padding: 15px 5px;
   font-size: 14px;
   color: #fff;
   border-radius: 0;
   /* Bỏ bo góc mặc định */
   box-shadow: none;
   height: 35px;
}

.content-center {
   justify-content: center;
}

/* Bỏ outline khi focus vào input */
.custom-contact-form .wpcf7-form-control:focus {
   outline: none;
   border-bottom: 1px solid #333;
   /* Đổi màu gạch dưới khi focus */
}

/* Kiểu cho placeholder */
.custom-contact-form .wpcf7-form-control::placeholder {
   color: #fff;
   font-size: 14px;
   font-family: inherit;
   /* Kế thừa font của theme */
}

/* Kiểu cho textarea */
.custom-contact-form textarea.wpcf7-form-control {
   resize: none;
   /* Bỏ chức năng thay đổi kích thước */

}

.custom-contact-form textarea {
   min-height: 60px;
   /* Chiều cao tối thiểu cho textarea */
}

/* Kiểu cho nút Gửi (Submit) */
.custom-contact-form .wpcf7-submit {
   background-color: #eda943 !important;
   /* Màu nền của nút */
   color: #ffffff !important;
   /* Màu chữ */
   border: none !important;
   padding: 0 20px !important;
   margin-top: 10px;
   border-radius: 20px !important;
   /* Bo góc cho nút */
   cursor: pointer;
   transition: background-color 0.3s ease;
   width: auto;
   /* Để nút không chiếm toàn bộ chiều rộng */
}

/* Hiệu ứng khi di chuột qua nút */
.custom-contact-form .wpcf7-submit:hover {
   background-color: #c76b35 !important;
   /* Màu nền đậm hơn khi hover */
}

/* Responsive cho màn hình nhỏ (điện thoại) */
@media (max-width: 768px) {
   .custom-contact-form .form-row {
      margin: 0;
   }

   .custom-contact-form .form-col {
      width: 100%;
      padding: 0;
      margin-bottom: 15px;
      /* Khoảng cách giữa các trường trên mobile */
   }
}

.doi-ngu img {
   width: 160px;
   height: 160px;
   background-color: #ccc;
   margin: 0 auto 15px;
   border-top-left-radius: 20px;
   border-bottom-right-radius: 20px;
   border: 1px solid #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-main-menu {
   display: flex;
   justify-content: center;
   /* Center the menu on the page */
   align-items: center;
   padding: 40px 20px;
   /* Add some padding for spacing */
   background-color: #fff;
   /* Set a background color if needed */
}

.custom-main-menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
}

.custom-main-menu li {
   position: relative;
   /* Required for the separator */
   padding: 0 25px;
   /* Adjust spacing between menu items */
}

/* Vertical bar separator */
.custom-main-menu li:not(:last-child)::after {
   content: '|';
   position: absolute;
   right: -2px;
   /* Fine-tune the position of the bar */
   top: 50%;
   transform: translateY(-50%);
   color: #d0d0d0;
   /* Light grey color for the separator */
   font-weight: 100;
   /* Make the bar thinner */
}

.custom-main-menu li a {
   text-decoration: none;
   color: #808080;
   /* Default grey color for text */
   font-size: 15px;
   font-weight: 700;
   /* Bold */
   text-transform: uppercase;
   /* Make text uppercase */
   transition: color 0.3s ease-in-out;
}

/* Style for the active/current menu item */
.custom-main-menu li.current-menu-item a,
.custom-main-menu li a:hover {
   color: #d97a43;
   /* Orange color for the active or hovered item */
}

ul.lang {
   list-style: none;
}

ul.lang li a {
   color: #c76b35
}

ul.lang li a {
   display: flex
}

ul.lang li a span {
   padding-right: 5px;
}

.header.show-on-scroll,
.stuck .header-main {
   background-color: #ffffff;
}

.top-divider {
   border-top: none;
}

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

.absolute-footer.dark,
.dark .nav-vertical li li.menu-item-has-children>a,
.dark .nav-vertical-fly-out>li>a,
.dark .nav-vertical>li>ul li a,
.dark .nav>li.html,
.dark .nav>li>a,
.nav-dark .is-outline,
.nav-dark .nav>li>a,
.nav-dark .nav>li>button,
.nav-dropdown.dark .nav-column>li>a,
.nav-dropdown.dark>li>a,
.dark,
.dark p,
.dark td {
   color: #ffffff;
}

.nav-dropdown-simple .nav-column li>a:hover,
.nav-dropdown.nav-dropdown-simple>li>a:hover {
   background: #ffffff;
   color: #de6437;
}

.fs-12 {
   font-size: 13px;
}

.footer-wrapper .section-title-container {
   margin-bottom: 0;
}

.dark .section-title-normal,
.dark .section-title-normal span {
   border-color: #fff;
}

.section-title-normal span {
   border-bottom: 0;
   padding-bottom: 0;
}

/* Left Column Content */
.gioi-thieu-left h3 {
   color: #d9a32b;
   font-weight: bold;
   display: flex;
   align-items: center;
   font-size: 1.2em;
}

.gioi-thieu-left .triangle {
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 12px solid #de6437;
   margin-right: 10px;
}

.gioi-thieu-left .section-title {
   color: #de6437;
   font-size: 2.8em;
   font-weight: bold;
   text-transform: uppercase;
   margin-top: 15px;
   margin-bottom: 20px;
}

.gioi-thieu-left p {
   line-height: 1.6;
}

/* Right Column Timeline */
.timeline-wrapper {
   position: relative;
   padding-left: 100px;
   /* Space for the years */
}

.timeline-wrapper::before {
   content: "";
   position: absolute;
   top: 15px;
   bottom: 15px;
   left: 124px;
   /* Position of the vertical line */
   width: 2px;
   background-color: #de6437;
}

.timeline-item {
   position: relative;
   margin-bottom: 35px;
   display: flex;
   align-items: center;
}

.timeline-item:last-child {
   margin-bottom: 0;
}

.timeline-year {
   position: absolute;
   left: -100px;
   /* Position year to the left of the line */
   top: 50%;
   transform: translateY(-50%);
   color: #de6437;
   font-weight: bold;
   font-size: 1.2em;
   width: 80px;
   text-align: right;
}

.timeline-icon {
   width: 30px;
   height: 30px;
   border: 2px solid #de6437;
   border-radius: 50%;
   background-color: #fff;
   position: absolute;
   left: 8px;
   /* Center icon on the line */
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
}

.timeline-icon i {
   color: #de6437;
   font-size: 14px;
}

.timeline-content {
   margin-left: 55px;
   /* Space from the line */
   border: 1px solid #de6437;
   padding: 15px 20px;
   border-radius: 10px;
   background-color: #fff;
   width: 100%;
}

.timeline-content p {
   margin: 0;
   line-height: 1.6;
}

/* Video Popup Styling */
.video-popup {
   display: none;
   /* Hidden by default */
   position: fixed;
   /* Stay in place */
   z-index: 1000;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   /* Enable scroll if needed */
   background-color: rgba(0, 0, 0, 0.8);
   /* Black w/ opacity */
}

.video-popup-content {
   position: relative;
   margin: auto;
   padding: 20px;
   width: 80%;
   max-width: 800px;
   top: 50%;
   transform: translateY(-50%);
}

.video-popup-content iframe {
   width: 100%;
   height: 450px;
   /* Adjust height as needed */
}

.close-popup {
   color: #fff;
   position: absolute;
   top: -20px;
   right: 0;
   font-size: 35px;
   font-weight: bold;
   cursor: pointer;
}

.close-popup:hover,
.close-popup:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

.timeline-icon-link .timeline-icon {
   transition: transform 0.3s ease;
}

.timeline-icon-link:hover .timeline-icon {
   transform: scale(1.2);
   cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 849px) {
   .timeline-content {
      width: auto;
   }

   .timeline-wrapper {
      padding-left: 0;
      margin-top: 40px;
   }

   .timeline-wrapper::before {
      left: 14px;
      /* Move line to the far left */
   }

   .timeline-year {
      position: static;
      transform: none;
      text-align: left;
      width: auto;
      margin-bottom: 10px;
      padding-left: 45px;
   }

   .timeline-item {
      flex-direction: column;
      align-items: flex-start;
   }

   .timeline-icon {
      left: 0;
      top: 35px;
   }

   .timeline-content {
      margin-left: 45px;
      margin-top: 0;
   }
}

.bg-slide-bottom {
   background-image: url("/wp-content/uploads/2025/07/vien_cong-1-scaled.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   height: 200px;
   width: 100%;
   position: absolute;
   bottom: -40px;
}

.button-scroll {
   position: absolute;
   bottom: 65px;
   left: 47%;
   z-index: 9999;
}

.button-scroll span {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}

.home-slider .flickity-page-dots {
   bottom: 135px;
   z-index: 3000;
}

/* --- Timeline Section --- */
.timeline-section {
   background-color: #c87043;
   width: 100%;
   padding: 60px 0;
   position: relative;
}

.section-header {
   color: white;
   margin-bottom: 80px;
   /* Increased space for the timeline */
}

.section-header h4 {
   margin: 0;
   font-weight: 300;
   letter-spacing: 1px;
   opacity: 0.8;
}

.section-header h1 {
   margin: 5px 0 0 0;
   font-size: 2.5rem;
   font-weight: 700;
}

/* --- Swiper and Timeline Bar --- */
.timeline-swiper {
   width: 90%;
   max-width: 1200px;
   margin: auto;
   position: relative;
   padding-top: 20px;
   /* Space for the timeline markers */
}

/* The main timeline bar */
.timeline-swiper::before {
   content: "";
   position: absolute;
   top: 20px;
   left: 0;
   right: 0;
   height: 2px;
   background-color: rgb(237, 169, 67);
   z-index: 1;
   /* Set a lower stacking order */
}

/* Ensure the slide container is on top of the line */
.timeline-swiper .swiper-wrapper {
   position: relative;
   /* z-index only works on positioned elements */
   z-index: 2;
   /* Set a higher stacking order */
}

/* --- Individual Slide Styling --- */
.swiper-slide {
   text-align: center;
   color: white;
   padding: 0 15px;
   position: relative;
   /* Needed for marker positioning */
}

.timeline-marker {
   position: absolute;
   top: 20px;
   /* Position at the timeline bar */
   left: 50%;
   transform: translate(-50%, -50%);
   /* Center the icon perfectly */
   z-index: 10;
   color: white;
   background-color: rgb(222, 100, 55);
   /* Correct background color to match section */
   padding: 0 5px;
   /* Create space around the icon */
   font-size: 24px;
}

.timeline-slide-content {
   padding-top: 60px;
   /* Space for the marker */
}

.timeline-year2 {
   font-size: 1.8rem;
   font-weight: 700;
   margin-bottom: 15px;
}

.timeline-description {
   font-size: 1rem;
   line-height: 1.6;
   min-height: 120px;
   /* Adjust to keep slides aligned */
   opacity: 0.9;
}

.timeline-image {
   margin-top: 20px;
   width: 100%;
   height: 200px;
   background-color: black;
   /* Placeholder color */
   border-radius: 8px;
}

/* --- Swiper Navigation & Pagination --- */
.swiper-button-next,
.swiper-button-prev {
   color: white;
   top: 50%;
}

.swiper-pagination-bullet {
   background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-bullet-active {
   background: white;
}

/* Hide navigation on smaller screens if desired */
@media (max-width: 768px) {

   .swiper-button-next,
   .swiper-button-prev {
      display: none;
   }

   .timeline-description {
      min-height: auto;
      /* Remove fixed height on mobile */
   }
}

body #powerTip {
   background-color: #de6437;
   max-width: 300px;
}

body #powerTip .bg-red {
   background-color: red !important;
}

body #powerTip.n:before {
   border-top: 10px solid rgb(255, 252, 252);
}

body #powerTip.s:before {
   border-bottom: 10px solid #fff;
}

body #powerTip.e:before {
   border-right: 10px solid #fff;
}

body #powerTip.w:before {
   border-left: 10px solid #fff;
   right: -10px;
}

body #powerTip.ne:before,
body #powerTip.nw:before {
   border-top: 10px solid #fff;
   border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.se:before,
body #powerTip.sw:before {
   border-bottom: 10px solid #fff;
   border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.nw-alt:before,
body #powerTip.ne-alt:before,
body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
   border-top: 10px solid #fff;
   border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
   border-bottom: 10px solid #fff;
   border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body .box_view_html {
   color: #fff;
   font-size: 13px;
}

body .box_view_html span.close_ihp svg {
   fill: #de6437;
}

.linh-vuc h1,
.san-pham h1,
.mo-hinh h1,
.mo-hinh i,
.san-pham i {
   color: #de6437;
}

.mo-hinh h4,
.san-pham h4,
.linh-vuc h4 {
   color: #eda943;
}

.linh-vuc .col-inner .box {
   border-radius: 5%;
   border-bottom: 10px solid #eda943;
   background-color: rgb(237, 237, 237);
}

/* === Custom Contact Form 7 Style === */

/* Container chính của form */
.custom-contact-form {
   margin: 0 auto;
   font-size: 14px;
}

/* Bố cục cho các hàng */
.custom-contact-form .form-row {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -15px;
   /* Tạo khoảng cách giữa các cột */
}

/* Cột 2 bên */
.custom-contact-form .form-col {
   width: 50%;
   padding: 0 15px;
   box-sizing: border-box;
}

/* Cột đầy đủ chiều rộng */
.custom-contact-form .form-col-full {
   width: 100%;
   padding: 0 15px;
   box-sizing: border-box;
}

/* Kiểu chung cho các ô input, textarea */
.custom-contact-form .wpcf7-form-control {
   width: 100%;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #ccc;
   /* Đường gạch dưới */
   padding: 15px 5px;
   font-size: 14px;
   color: #fff;
   border-radius: 0;
   /* Bỏ bo góc mặc định */
   box-shadow: none;
   height: 35px;
}

.content-center {
   justify-content: center;
}

/* Bỏ outline khi focus vào input */
.custom-contact-form .wpcf7-form-control:focus {
   outline: none;
   border-bottom: 1px solid #333;
   /* Đổi màu gạch dưới khi focus */
}

/* Kiểu cho placeholder */
.custom-contact-form .wpcf7-form-control::placeholder {
   color: #fff;
   font-size: 14px;
   font-family: inherit;
   /* Kế thừa font của theme */
}

/* Kiểu cho textarea */
.custom-contact-form textarea.wpcf7-form-control {
   resize: none;
   /* Bỏ chức năng thay đổi kích thước */

}

.custom-contact-form textarea {
   min-height: 60px;
   /* Chiều cao tối thiểu cho textarea */
}

/* Kiểu cho nút Gửi (Submit) */
.custom-contact-form .wpcf7-submit {
   background-color: #eda943 !important;
   /* Màu nền của nút */
   color: #ffffff !important;
   /* Màu chữ */
   border: none !important;
   padding: 0 20px !important;
   margin-top: 10px;
   border-radius: 20px !important;
   /* Bo góc cho nút */
   cursor: pointer;
   transition: background-color 0.3s ease;
   width: auto;
   /* Để nút không chiếm toàn bộ chiều rộng */
}

/* Hiệu ứng khi di chuột qua nút */
.custom-contact-form .wpcf7-submit:hover {
   background-color: #c76b35 !important;
   /* Màu nền đậm hơn khi hover */
}

/* Responsive cho màn hình nhỏ (điện thoại) */
@media (max-width: 768px) {
   .custom-contact-form .form-row {
      margin: 0;
   }

   .custom-contact-form .form-col {
      width: 100%;
      padding: 0;
      margin-bottom: 15px;
      /* Khoảng cách giữa các trường trên mobile */
   }
}

.doi-ngu img {
   width: 160px;
   height: 160px;
   background-color: #ccc;
   margin: 0 auto 15px;
   border-top-left-radius: 20px;
   border-bottom-right-radius: 20px;
   border: 1px solid #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-main-menu {
   display: flex;
   justify-content: center;
   /* Center the menu on the page */
   align-items: center;
   padding: 20px 20px;
   /* Add some padding for spacing */
   background-color: #fff;
   /* Set a background color if needed */
}

.custom-main-menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
}

.custom-main-menu li {
   position: relative;
   /* Required for the separator */
   padding: 0 25px;
   /* Adjust spacing between menu items */
}

/* Vertical bar separator */
.custom-main-menu li:not(:last-child)::after {
   content: '|';
   position: absolute;
   right: -2px;
   /* Fine-tune the position of the bar */
   top: 50%;
   transform: translateY(-50%);
   color: #d0d0d0;
   /* Light grey color for the separator */
   font-weight: 100;
   /* Make the bar thinner */
}

.custom-main-menu li a {
   text-decoration: none;
   color: #808080;
   /* Default grey color for text */
   font-size: 15px;
   font-weight: 700;
   /* Bold */
   text-transform: uppercase;
   /* Make text uppercase */
   transition: color 0.3s ease-in-out;
}

/* Style for the active/current menu item */
.custom-main-menu li.current-menu-item a,
.custom-main-menu li a:hover {
   color: #d97a43;
   /* Orange color for the active or hovered item */
}

ul.lang {
   list-style: none;
}

ul.lang li a {
   color: #c76b35
}

ul.lang li a {
   display: flex
}

ul.lang li a span {
   padding-right: 5px;
}

.header.show-on-scroll,
.stuck .header-main {
   background-color: #ffffff;
}

.top-divider {
   border-top: none;
}

.sticky-menu {
   position: fixed;
   top: 100px;
   left: 0;
   right: 0;
   z-index: 1000;
   background: white;
   /* hoặc màu bạn muốn */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.page-product-category .section-title-bold span,
.page-product-category .section-title-bold-center span {
   border: none;
   padding: 0 10px 0 0;
}

.section-title b {
   height: 1px;
}

.product-title a,
.cat-item a {
   font-weight: bold;
}

.sidebar-pro-cat {
   border-right: solid 2px #EBEBEB;
}

.widget>ul>li+li,
ul.menu>li+li {
   border-top: 0;
}

.product-short-description {
   width: 100%;
   height: 250px;
   max-height: 250px;
   overflow: auto;
}

ul.custom-category-nav {
   display: flex;
   list-style: none;
   text-align: center;
   justify-content: center;
   border-bottom: solid 1px #ccc;
}

ul.custom-category-nav li {
   margin-bottom: 0;
   padding-bottom: 10px;
}

ul.custom-category-nav li a {
   padding: 12px 20px;
   font-size: 18px;
   font-weight: bold;
}

.custom-category-nav li.active {
   border-bottom: solid 2px #de6437;
}

.video-right {
   max-height: 420px;
   overflow: scroll;
   overflow-x: hidden;
   margin-bottom: 15px;
}

.video-right::-webkit-scrollbar {
   width: 5px;
}

.video-right::-webkit-scrollbar-track {
   background: #eee;
   border-radius: 10px;
}

.video-right::-webkit-scrollbar-thumb {
   background-color: #999;
   border-radius: 10px;
}

.nav-size-xlarge li {
   margin: 0 20px
}

ul.nav-size-xlarge {
   border-bottom: solid 1px #ccc;
}

.info-box-3f {
   background: #F15825;
   color: white;
   padding: 40px 50px;
   border-radius: 15px;
   margin-bottom: 50px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.info-box-3f h3 {
   color: white;
   font-size: 1.3em;
}

.info-box-3f p {
   color: white;
   line-height: 1.6;
   text-align: left;
}

.info-box-3f strong {
   font-weight: bold;
   color: white;
}

/* Nút XEM CHI TIẾT */
.info-box-3f .button {
   background: white !important;
   color: rgb(244, 67, 54) !important;
   font-weight: bold;
   border: none;
   padding: 12px 35px;
   font-size: 1.1em;
   transition: all 0.3s ease;
}

.info-box-3f .button:hover {
   background: rgb(255, 245, 245) !important;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* Layout cho tiêu đề số và text cùng hàng */
.title-group-3f {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 10px;
   margin-bottom: 20px;
}

.number-3f {
   color: rgb(255, 153, 0);
   font-size: 5em;
   font-weight: bold;
   margin: 0;
   line-height: 0.9;
}

.text-group-3f {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   text-align: left;
}

.main-title-3f {
   color: rgb(255, 69, 0);
   font-weight: bold;
   margin: 0;
   font-size: 2.5em;
   line-height: 1;
}

.sub-title-3f {
   color: rgb(255, 69, 0);
   font-weight: bold;
   margin: 5px 0 0 0;
   font-size: 1em;
   line-height: 1.2;
   min-height: 200px;
}

/* Responsive */
@media (max-width: 768px) {
   .info-box-3f {
      padding: 30px 25px;
   }

   .info-box-3f h3 {
      font-size: 1.1em;
   }

   h1 {
      font-size: 2em !important;
   }

   .number-3f {
      font-size: 3.5em;
   }

   .main-title-3f {
      font-size: 2em;
   }

   .sub-title-3f {
      font-size: 0.9em;
   }
}

.title-3f {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 20px;
}

.title-3f-sub {
   line-height: 32px;
   text-align: left;
}

.htf-header {
   padding: 0 20px;
}

.htf-subtitle {
   color: rgb(244, 67, 54);
   font-size: 1.1em;
   font-weight: 600;
   margin: 0 0 5px 0;
}

.htf-title {
   color: rgb(244, 67, 54);
   font-size: 3em;
   font-weight: bold;
   margin: 0;
   line-height: 1.2;
}

/* Main Title */
.htf-main-title {
   color: rgb(0, 0, 0);
   font-size: 2.2em;
   font-weight: bold;
   margin: 0 0 30px 0;
   padding: 0 20px;
}

/* Card Container */
.htf-card {
   background: linear-gradient(180deg, #ffffff 0%, #FAEBC3 100%);
   border-radius: 20px;
   overflow: hidden;
   height: 100%;
}

.htf-card-header {
   background: white;
   padding: 25px 30px;
}

.htf-card-title {
   font-size: 1.8em;
   font-weight: bold;
   color: rgb(0, 0, 0);
   margin: 0;
}

.htf-card-title .htf-red {
   color: rgb(244, 67, 54);
}

/* Stats Rows */
.htf-stats-row {
   padding: 30px;
   color: white;
}

.htf-red-bg {
   background: rgb(244, 67, 54);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   min-height: 210px;
}

.htf-orange-bg {
   background: rgb(255, 152, 0);
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   min-height: 210px;
}

.htf-stats-content {
   text-align: center;
}

.htf-stats-label {
   font-size: 1.1em;
   font-weight: bold;
   margin: 0 0 5px 0;
   text-transform: uppercase;
}

.htf-stats-label-small {
   font-size: 0.95em;
   font-weight: bold;
   margin: 0 0 3px 0;
   line-height: 1.3;
}

.htf-stats-sublabel {
   font-size: 0.85em;
   margin: 0 0 15px 0;
   opacity: 0.95;
}

.htf-stats-sublabel-small {
   font-size: 0.75em;
   margin: 0 0 8px 0;
   opacity: 0.9;
   line-height: 1.3;
}

.htf-stats-number {
   font-size: 5em;
   font-weight: bold;
   margin: 0;
   line-height: 1;
}

.htf-stats-large {
   font-size: 6em;
}

.htf-stats-unit {
   font-size: 0.35em;
   font-weight: bold;
   margin-left: 5px;
}

/* Split Stats Row */
.htf-stats-row.htf-split {
   display: flex;
   padding: 25px 20px;
}

.htf-stats-half {
   flex: 1;
   text-align: center;
   padding: 0 10px;
}

.htf-stats-divider {
   width: 2px;
   background: rgba(255, 255, 255, 0.4);
   margin: 0 15px;
}

/* Images Row */
.htf-images-row {
   display: flex;
   gap: 15px;
   padding: 20px;
}

.htf-image-wrapper {
   flex: 1;
   border-radius: 15px;
   overflow: hidden;
   background: white;
}

.htf-image-wrapper img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   display: block;
}

/* Responsive */
@media (max-width: 768px) {
   .htf-title {
      font-size: 2em;
   }

   .htf-main-title {
      font-size: 1.5em;
   }

   .htf-card-title {
      font-size: 1.4em;
   }

   .htf-stats-number {
      font-size: 3.5em;
   }

   .htf-stats-large {
      font-size: 4.5em;
   }

   .htf-stats-row.htf-split {
      flex-direction: column;
   }

   .htf-stats-divider {
      display: none;
   }

   .htf-stats-half {
      margin-bottom: 15px;
   }

   .htf-stats-half:last-child {
      margin-bottom: 0;
   }

   .htf-images-row {
      flex-direction: column;
   }
}

.bg-wrapper {
   padding: 15px;
   border-radius: 15px;
}

.foods {
   background: linear-gradient(180deg, #F9EAC2 0%, #ffffff 100%);
   border-radius: 20px;
}