@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Poppins: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");
:root {
  --whites: #fff;
  --bg: #fafcfa;
  --shadow-navbar-color: #e8e8e8;
  --blacks: lab(7.78673% 1.82345 -15.0537);
  --grays: lab(56.32% 0 -0.01);
  --main: #cb292b;
  --sub-main: #fb7a24;
  --sub-main2: #c5a469;
  --main2: #1d1d1d;
  --radius: 0.65rem;
  --border-color: #e2e8f099;
  --top-section: 4rem;
}

.section-product .box-card-product .box-content .box-catagory-product .name-catagory-product {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}

.section-product .box-card-product .box-content .box-catagory-product .name-product {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-line, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-line:hover, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-facebook, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-facebook:hover, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-email, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-email:hover, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-tel, .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-tel:hover, .box-contact .box-button .btn-sendmessage, .box-contact .box-button .btn-sendmessage:hover, .section-product .box-promotion .box-button-social .btn-line, .section-product .box-promotion .box-button-social .btn-line:hover, .section-product .box-promotion .box-button-social .btn-facebook, .section-product .box-promotion .box-button-social .btn-facebook:hover, .section-product .box-promotion .box-button-social .btn-email, .section-product .box-promotion .box-button-social .btn-email:hover, .section-product .box-promotion .box-button-social .btn-tel, .section-product .box-promotion .box-button-social .btn-tel:hover, .section-product .box-card-product:hover .box-image .img-product, .section-product .box-card-product .box-image .img-product, .section-product .box-card-product .box-image .img-product:hover, .section-product .box-card-product .box-content .btn-view-product, .section-product .box-card-product .box-content .btn-view-product:hover, .content-about-us .section-content-aboutus .btn-view-product, .content-about-us .section-content-aboutus .btn-view-product:hover, footer a, .section-header .box-content-index-header .box-btn .btn-width, .section-header .box-content-index-header .box-btn .btn-view-cer, .section-header .box-content-index-header .box-btn .btn-go-product, .section-header .box-content-index-header .box-btn .btn-go-product:hover, .section-intro-index .box-content .btn-view-video, .section-intro-index .box-content .btn-view-video:hover, .section-composite .box-item, .section-composite .box-item-composite, .section-composite .box-item-composite:hover .box-icon, .section-composite .box-item-composite:hover .box-icon svg, .section-composite .box-item-composite .box-icon, .section-composite .box-item-composite .box-icon svg {
  transition: all 0.3s ease-in-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif, "IBM Plex Sans Thai", sans-serif !important;
  position: relative;
  overflow-x: hidden !important;
  background: var(--whites) !important;
}

:focus {
  outline: -webkit-focus-ring-color auto 0px;
}

.form-control {
  border-radius: 4px !important;
  font-weight: 300 !important;
  box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--grays) !important;
}
.form-control:hover {
  transition: 0.3s ease-in-out;
}
.form-control::-moz-placeholder {
  font-weight: 300 !important;
  color: var(--grays-font) !important;
}
.form-control::placeholder {
  font-weight: 300 !important;
  color: var(--grays-font) !important;
}
.form-control:focus {
  box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8) !important;
  border-color: var(--border) !important;
}

a {
  text-decoration: none !important;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.btn {
  border-radius: var(--radius) !important;
  color: var(--bg) !important;
  min-width: 130px !important;
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784);
}

#modalCertificate .modal-header {
  border: none !important;
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 3s steps(30, end) infinite, blink 0.8s infinite;
}

.accordion-custom .accordion-body {
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784) !important;
}
.accordion-custom .accordion-item {
  border: none !important;
  border-radius: var(--radius);
}
.accordion-custom .accordion-item .accordion-header {
  color: var(--main);
}
@media screen and (max-width: 429px) {
  .accordion-custom .accordion-item .accordion-header {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
.accordion-custom .accordion-item .accordion-header .accordion-button {
  border-radius: var(--radius) !important;
  border-left: 5px solid var(--sub-main2);
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784) !important;
}
.accordion-custom .accordion-item .accordion-header .accordion-button:focus {
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784) !important;
}
.accordion-custom .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: rgba(197, 163, 105, 0.07);
}
.accordion-custom .nav-pills .nav-link {
  background-color: transparent !important;
  text-align: left;
  color: var(--grays) !important;
  position: relative;
  font-size: 15px;
}
.accordion-custom .nav-pills .nav-link::before {
  position: absolute;
  content: "";
  left: 0;
  top: 13px;
  background-color: var(--main);
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
.accordion-custom .nav-pills .active {
  color: var(--main) !important;
}

.breadcrumb {
  width: 100%;
  display: flex;
  justify-content: center;
}
.breadcrumb a {
  color: var(--whites);
}
.breadcrumb .active {
  color: var(--sub-main2) !important;
  text-decoration: underline;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--whites);
}

.accordion-button:not(.collapsed) {
  color: var(--main2) !important;
}

.modal-video-custom .modal-content {
  background-color: transparent !important;
  border: transparent;
}
.modal-video-custom .modal-content .modal-header {
  border-bottom: none;
}
.modal-video-custom .modal-content .modal-header .btn-close {
  background-color: var(--whites);
}

.breadcrumb-custom-product-detail {
  float: left;
  font-size: 14px;
  font-weight: 500;
}
.breadcrumb-custom-product-detail a {
  color: var(--blacks) !important;
}
.breadcrumb-custom-product-detail .breadcrumb-item + .breadcrumb-item::before {
  color: var(--blacks);
}

.header-custom .navbar-toggler {
  border: none !important;
}
.header-custom .navbar-toggler:focus {
  box-shadow: none !important;
}
.header-custom .active {
  color: var(--main) !important;
}
@media screen and (max-width: 768px) {
  .header-custom {
    height: 100%;
  }
}
.header-custom li {
  padding-left: 10px;
}
.header-custom li a {
  font-weight: 500;
  color: var(--grays);
}
.header-custom li a:hover {
  color: var(--main);
}
.header-custom .btn-contact {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sub-main), var(--main)) border-box;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  padding: 5px;
}
.header-custom .btn-contact:hover {
  box-shadow: 0 6px 20px rgba(203, 41, 43, 0.35);
}

.add-bg-header {
  box-shadow: 0 1px 3px var(--shadow-navbar-color, rgba(0, 0, 0, 0.0392156863));
  border-color: var(--border-color);
  background: var(--whites) !important;
  border-top: 3px solid var(--main);
}

.logo {
  max-width: 58px !important;
  margin-bottom: 0 !important;
}

.section-header {
  position: relative;
}
.section-header .box-content-index-header {
  min-height: 500px;
  margin-top: 0.5rem;
}
.section-header .box-content-index-header .background-header {
  width: 100%;
  height: 600px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.section-header .box-content-index-header .background-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 768px) {
  .section-header .box-content-index-header {
    min-height: 450px;
  }
}
@media screen and (max-width: 429px) {
  .section-header .box-content-index-header {
    min-height: 350px;
  }
}
.section-header .box-content-index-header .header-title-1 {
  color: var(--whites) !important;
  font-size: 4rem;
  font-weight: 600;
  margin-bottom: 0;
  margin: 8rem auto 0;
}
@media screen and (max-width: 768px) {
  .section-header .box-content-index-header .header-title-1 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 429px) {
  .section-header .box-content-index-header .header-title-1 {
    font-size: 2.2rem;
  }
}
.section-header .box-content-index-header .header-title-2 {
  background: linear-gradient(135deg, var(--sub-main), var(--main));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-top: 1rem;
  font-size: 4rem;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .section-header .box-content-index-header .header-title-2 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 429px) {
  .section-header .box-content-index-header .header-title-2 {
    font-size: 2.2rem;
  }
}
.section-header .box-content-index-header .header-other-description {
  margin-top: 1rem;
  color: var(--whites);
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .section-header .box-content-index-header .header-other-description {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 429px) {
  .section-header .box-content-index-header .header-other-description {
    font-size: 1.2rem;
  }
}
.section-header .box-content-index-header .header-other-description span {
  color: var(--sub-main2);
}
.section-header .box-content-index-header .box-btn {
  margin-top: 2rem;
}
.section-header .box-content-index-header .box-btn .btn-width, .section-header .box-content-index-header .box-btn .btn-go-product, .section-header .box-content-index-header .box-btn .btn-view-cer {
  width: 190px;
  padding: 0.7rem 1rem;
}
@media screen and (max-width: 429px) {
  .section-header .box-content-index-header .box-btn .btn-width, .section-header .box-content-index-header .box-btn .btn-go-product, .section-header .box-content-index-header .box-btn .btn-view-cer {
    padding: 0.5rem 0.5rem;
  }
}
.section-header .box-content-index-header .box-btn .btn-view-cer {
  color: var(--whites);
  background: var(--sub-main2);
  border: 2px solid var(--sub-main2);
  border-radius: var(--radius);
  margin: 5px;
}
.section-header .box-content-index-header .box-btn .btn-go-product {
  color: var(--main2) !important;
  border-radius: var(--radius);
  border: 2px solid var(--whites);
  background: var(--whites) !important;
  margin: 5px;
}
.section-header .box-content-index-header .box-btn .btn-go-product:hover {
  background: var(--sub-main2) !important;
  border: 2px solid var(--sub-main2);
  color: var(--whites) !important;
}

.section-intro-index {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
  display: flex;
}
@media screen and (max-width: 1024px) {
  .section-intro-index {
    padding-top: 0 !important;
    text-align: center;
  }
  .section-intro-index .box-name-title2 {
    margin-bottom: 2rem;
  }
}
.section-intro-index .box-content {
  color: var(--grays);
  border-radius: var(--radius);
  position: relative;
  padding: 0.5rem 1.5rem;
  background-color: rgba(237, 53, 40, 0.1);
  margin-top: 2rem;
}
.section-intro-index .box-content .btn-view-video {
  color: var(--whites);
  background: var(--main);
  border: 2px solid var(--main);
  border-radius: var(--radius);
  margin: 5px;
  padding: 0.4rem 1rem;
  box-shadow: 0 1px 3px var(--shadow-navbar-color, rgba(12, 12, 12, 0.0392156863));
}
.section-intro-index .box-content .btn-view-video:hover {
  background-color: transparent;
  color: var(--main) !important;
}
.section-intro-index .box-content .intro-name-org {
  color: var(--main2);
  margin-top: 1rem;
}
.section-intro-index .box-content::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  border-radius: var(--radius);
  border-left: 10px solid var(--main);
}
.section-intro-index .box-cer-number {
  margin-top: 2rem;
}
.section-intro-index .box-cer-number .cer-number-th {
  color: var(--main);
  margin-bottom: 0px;
}
.section-intro-index .box-cer-number .cer-content, .section-intro-index .box-cer-number .cer-number-en {
  font-size: 14px;
  margin-bottom: 0 !important;
  color: var(--grays);
}
.section-intro-index .box-name-title {
  margin-top: 2rem;
}
.section-intro-index .box-name-title .name-title {
  color: var(--main2);
  margin-bottom: 0px;
}
.section-intro-index .box-name-title .content-name-title {
  font-size: 14px;
  margin-bottom: 0 !important;
  color: var(--grays);
}
.section-intro-index .box-name-title2 {
  margin-top: 2rem;
}
.section-intro-index .box-name-title2 .name-title2 {
  color: var(--main2);
  margin-bottom: 0px;
}
.section-intro-index .box-name-title2 .content-name-title2 {
  font-size: 14px;
  margin-bottom: 0 !important;
  color: var(--main);
}

.section-composite {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
  position: relative;
  background-size: cover;
  background-position: center;
}
.section-composite::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  left: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.9);
}
.section-composite .image-composite {
  border-radius: var(--radius);
  width: 100%;
  height: 300px;
  margin-top: 2rem;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.235);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .section-composite {
    padding-top: 0;
  }
}
.section-composite .label-composite {
  background-color: var(--main);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
  position: relative;
  z-index: 2;
}
.section-composite .title-composite {
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--whites);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 429px) {
  .section-composite .title-composite {
    font-size: 18px;
  }
}
.section-composite .content-deposites {
  color: var(--whites);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 429px) {
  .section-composite .content-deposites {
    font-size: 14px;
    line-height: 25px;
  }
}
.section-composite .content-deposites span {
  color: var(--sub-main2);
}
.section-composite .box-item {
  padding: 1rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--shadow-navbar-color);
  margin-top: 2rem;
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.235);
  background-color: var(--whites);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 429px) {
  .section-composite .box-item {
    margin-top: 1rem;
  }
}
.section-composite .box-item:hover {
  transform: translateY(-5px);
  border: 1px solid var(--sub-main2);
}
.section-composite .box-item .box-content .percent {
  display: flex;
  color: var(--main);
}
.section-composite .box-item .box-content .percent::after {
  margin-top: 2px;
  content: "%";
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.5s;
}
.section-composite .box-item .box-content p {
  color: var(--grays);
}
.section-composite .composite-feature-row {
  margin-top: 2rem;
}
@media screen and (max-width: 429px) {
  .section-composite .composite-feature-row {
    margin-top: 1rem;
  }
}
.section-composite .composite-feature-row .box-item-composite {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.section-composite .composite-feature-row .box-item-composite .box-content {
  display: flex;
  align-items: center;
  flex: 1;
}
.section-composite .composite-feature-row .box-item-composite .box-content p {
  margin-bottom: 0;
}
.section-composite .box-item-composite {
  padding: 1rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--shadow-navbar-color);
  margin-top: 2rem;
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.235);
  min-height: 190px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  background-color: var(--whites);
}
@media screen and (max-width: 429px) {
  .section-composite .box-item-composite {
    margin-top: 1rem;
    min-height: 140px;
  }
}
.section-composite .box-item-composite:hover {
  transform: translateY(-5px);
  border: 1px solid var(--sub-main2);
}
.section-composite .box-item-composite:hover .box-icon {
  background-color: var(--sub-main2);
}
.section-composite .box-item-composite:hover .box-icon svg {
  color: var(--whites);
}
.section-composite .box-item-composite .box-icon {
  background-color: rgba(197, 163, 105, 0.235);
  padding: 5px;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.235);
}
.section-composite .box-item-composite .box-icon svg {
  margin-top: 5px;
  margin-left: 3px;
  font-size: 1.2rem !important;
  color: var(--sub-main2);
}
.section-composite .box-item-composite .box-content {
  margin-top: 1rem;
}
.section-composite .box-item-composite .box-content p {
  color: var(--grays);
  line-height: 28px;
}

.section-feature {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
}
@media screen and (max-width: 768px) {
  .section-feature {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.section-feature .box-content {
  color: var(--grays);
  border-radius: var(--radius);
  position: relative;
  padding: 0.5rem 1.5rem;
  background-color: rgba(197, 163, 105, 0.07);
  margin-top: 2rem;
}
@media screen and (min-width: 320px) and (max-width: 375px) {
  .section-feature .box-content {
    margin-top: 0;
  }
}
.section-feature .box-content::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  border-radius: var(--radius);
  border-left: 10px solid var(--sub-main2);
}
.section-feature .box-content .label-feature {
  background-color: var(--main);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
  margin-top: 1rem;
}
.section-feature .box-content .subcontent-feature {
  margin-top: 1rem;
  color: var(--main2);
}
.section-feature .box-content .content-feature {
  color: var(--grays);
  line-height: 30px;
}
.section-feature .box-img {
  margin-top: 2.5rem;
  position: relative;
  height: 100%;
  width: 100%;
}
.section-feature .box-img img {
  border-radius: var(--radius);
  height: auto;
}
.section-feature .box-img::before {
  position: absolute;
  top: -30px;
  right: -50px;
  content: "";
  background-color: rgba(197, 163, 105, 0.07);
  width: 90%;
  height: 100%;
  z-index: -1;
  border-radius: var(--radius);
}
@media screen and (max-width: 429px) {
  .section-feature .box-img::before {
    width: 60%;
    right: 0px;
    top: -20px;
  }
}

.section-showcase {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
}
@media screen and (max-width: 1024px) {
  .section-showcase {
    margin-top: 2rem;
  }
}
.section-showcase .label-showcase {
  background-color: var(--sub-main2);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
}
.section-showcase .label-showcase {
  background-color: var(--main);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
}
.section-showcase .title-showcase {
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--sub);
}
@media screen and (max-width: 429px) {
  .section-showcase .title-showcase {
    font-size: 18px;
  }
}
.section-showcase .content-showcase {
  color: var(--grays);
}
@media screen and (max-width: 429px) {
  .section-showcase .content-showcase {
    font-size: 14px;
    line-height: 25px;
  }
}
.section-showcase .content-showcase span {
  color: var(--sub-main2);
}
.section-showcase .image-slides {
  margin-top: 1rem;
}

.section-choose-up {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
}
.section-choose-up .accordion-custom .accordion-item {
  border-radius: var(--radius);
}
.section-choose-up .tab-content-bg {
  background: var(--whites) !important;
  border-radius: var(--radius);
}
.section-choose-up .tab-content-bg .tab-content {
  height: 100%;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784);
}
@media screen and (max-width: 768px) {
  .section-choose-up .tab-content-bg .tab-content {
    margin-top: 1rem;
  }
}
.section-choose-up .tab-content-bg img {
  border-radius: var(--radius);
}
.section-choose-up .tab-content-bg .title-choose-up {
  color: var(--main2);
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .section-choose-up .tab-content-bg .title-choose-up {
    margin-top: 1rem;
  }
}
.section-choose-up .tab-content-bg .content-choose-up {
  color: var(--grays);
}

.remove-padding {
  padding: 0 !important;
}

p {
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
  margin-bottom: 10px !important;
}

footer {
  background-color: var(--main);
  padding-bottom: 2rem;
}
footer a {
  color: var(--whites);
  font-size: 14px !important;
  font-weight: 400;
}
footer a:hover {
  color: var(--whites);
}
footer p {
  margin-bottom: 8px !important;
  font-weight: 400;
}
footer .footer-email {
  margin-top: 0.5rem;
}
footer .line-footer {
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0px 3px 16px 0px rgba(255, 255, 255, 0.09);
}
footer .footer-copyright, footer .footer-identification {
  font-size: 14px;
  color: var(--whites);
}
footer .footer-identification {
  text-align: right;
}
footer .logo-footer {
  margin-top: 3rem;
}
footer .logo-footer .img-logo-footer {
  width: 120px;
}
footer .footer-title-menu {
  margin-top: 3rem;
  font-weight: 500;
  color: var(--whites);
}
@media screen and (max-width: 768px) {
  footer .footer-title-menu {
    margin-top: 1.5rem;
  }
}
footer .footer-address {
  margin-top: 1rem;
  line-height: 26px;
  color: var(--whites);
}
footer .line-footer-bottom {
  margin-top: 2.5rem;
}
@media screen and (max-width: 768px) {
  footer .footer-menu {
    float: none;
  }
}
footer .footer-social {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  footer .footer-social {
    float: none;
  }
}
footer .footer-social svg {
  margin-right: 2px;
}
footer .footer-social a {
  margin-top: 0.3rem;
  margin-bottom: 0.7rem;
}

.section-banner {
  text-align: center;
}
.section-banner .box-banner {
  position: relative;
  width: 100%;
  height: 100%;
}
.section-banner .box-banner::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--blacks);
  opacity: 0.8;
}
.section-banner .box-banner .img-banner {
  width: 100%;
  height: auto;
  max-height: 400px;
  background-size: cover;
  background-position: center;
}
.section-banner .box-banner .box-conntent-banner {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}
.section-banner .box-banner .box-conntent-banner .content-banner {
  font-size: 2.5rem;
  color: var(--whites);
  font-weight: 600;
}
@media screen and (max-width: 429px) {
  .section-banner .box-banner .box-conntent-banner .content-banner {
    font-size: 1.4rem;
    margin-bottom: 5px;
  }
}

.content-about-us .section-content-aboutus {
  display: flex;
  align-self: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.content-about-us .section-content-aboutus .box-content {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.content-about-us .section-content-aboutus .box-content .intro-name-aboutus {
  color: var(--main);
}
.content-about-us .section-content-aboutus .box-content .intro-name-title, .content-about-us .section-content-aboutus .box-content .intro-name-sub-title {
  color: var(--grays);
}
.content-about-us .section-content-aboutus .box-image {
  width: 100%;
  height: 100%;
  position: relative;
}
.content-about-us .section-content-aboutus .box-image::before {
  position: absolute;
  content: "";
  top: 10%;
  left: 10%;
  background-color: rgba(197, 163, 105, 0.07);
  width: 100%;
  height: 80%;
  z-index: -1;
  border-radius: var(--radius);
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784);
}
.content-about-us .section-content-aboutus .box-image img {
  border-radius: var(--radius);
  box-shadow: 0px 3px 16px 0px rgba(197, 163, 105, 0.0901960784);
}
.content-about-us .section-content-aboutus .btn-view-product {
  color: var(--whites) !important;
  background: var(--sub-main2) !important;
  border: 1px solid var(--sub-main2) !important;
  border-radius: var(--radius);
  max-width: 160px;
  padding: 0.7rem 1rem !important;
  margin-bottom: 2rem;
}
.content-about-us .section-content-aboutus .btn-view-product:hover {
  color: var(--sub-main2) !important;
  background: var(--whites) !important;
}
.content-about-us .box-vision {
  margin-top: var(--top-section);
  padding-bottom: 2rem;
  background-color: rgba(197, 163, 105, 0.07);
}
@media screen and (max-width: 768px) {
  .content-about-us .box-vision {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.content-about-us .box-vision .box-content {
  color: var(--grays);
  border-radius: var(--radius);
  position: relative;
  padding: 1.5rem;
  margin-top: 2rem;
}
@media screen and (min-width: 320px) and (max-width: 375px) {
  .content-about-us .box-vision .box-content {
    margin-top: 0;
  }
}
.content-about-us .box-vision .box-content .label-vision {
  background-color: var(--main);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
  margin-top: 1rem;
}
.content-about-us .box-vision .box-content .subcontent-vision {
  margin-top: 1rem;
  color: var(--main2);
}
.content-about-us .box-vision .box-content .content-vision {
  color: var(--grays);
  line-height: 30px;
}
.content-about-us .box-section-director {
  padding-bottom: var(--top-section);
  padding-top: var(--top-section);
}
@media screen and (max-width: 768px) {
  .content-about-us .box-section-director {
    padding-top: var(--top-section);
    padding-bottom: 0;
  }
}
.content-about-us .box-section-director {
  text-align: center;
}
.content-about-us .box-section-director .label-orchart {
  background-color: var(--main);
  display: inline-block;
  padding: 2px 2rem;
  border-radius: 50px;
  color: var(--whites);
  position: relative;
  z-index: 2;
}
.content-about-us .box-section-director .title-orchart {
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--blacks);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 429px) {
  .content-about-us .box-section-director .title-orchart {
    font-size: 18px;
  }
}
.content-about-us .box-section-director .box-director-col {
  margin-top: 2rem;
}
.content-about-us .box-section-director .box-director-col .box-item .box-content img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}
.content-about-us .box-section-director .box-director-col .box-item .box-content .name-director {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.content-about-us .box-section-director .box-director-col .box-item .box-content .content-director {
  text-align: left;
}
.content-about-us .box-section-director .box-director-col .box-item .box-content .content-director li {
  position: relative;
  list-style: none;
  margin-bottom: 0.5rem;
  margin-left: 1.5rem;
  color: var(--grays);
}
.content-about-us .box-section-director .box-director-col .box-item .box-content .content-director li::before {
  position: absolute;
  top: 6px;
  left: -1.5rem;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50px;
  background-color: var(--main);
}

.section-product {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
}
@media screen and (max-width: 1024px) {
  .section-product {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.section-product .box-promotion .box-detail {
  padding: 1.5rem 1rem;
  border-left: 10px solid var(--main);
  background-color: rgba(237, 53, 40, 0.1);
  box-shadow: 0 1px 3px var(--shadow-navbar-color, rgba(94, 94, 94, 0.0392156863));
  border-radius: var(--radius);
}
.section-product .box-promotion .box-detail h3 {
  color: var(--main);
}
.section-product .box-promotion .box-detail p {
  margin-bottom: 0 !important;
}
@media screen and (max-width: 1024px) {
  .section-product .box-promotion .box-countdown {
    margin-top: 2rem;
  }
}
.section-product .box-promotion .box-countdown .title-text-promotion .text-flashsale {
  font-size: 3rem;
  color: var(--main);
  font-weight: 600;
  display: inline-block;
  animation: pulse 1s infinite;
}
.section-product .box-promotion .box-countdown .title-text-promotion .text-end-countdown {
  font-size: 14px !important;
}
.section-product .box-promotion .box-button-social .btn-product {
  border-radius: var(--radius);
  margin-right: 10px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  margin-top: 1rem;
}
@media screen and (max-width: 1024px) {
  .section-product .box-promotion .box-button-social .btn-product {
    width: 100%;
  }
}
.section-product .box-promotion .box-button-social .btn-line {
  border: 2px solid #06c755;
  color: var(--whites) !important;
  background-color: #06c755;
}
.section-product .box-promotion .box-button-social .btn-line:hover {
  color: #06c755 !important;
  background-color: transparent;
}
.section-product .box-promotion .box-button-social .btn-facebook {
  border: 2px solid #1877f2;
  color: var(--whites) !important;
  background-color: #1877f2;
}
.section-product .box-promotion .box-button-social .btn-facebook:hover {
  color: #1877f2 !important;
  background-color: transparent;
}
.section-product .box-promotion .box-button-social .btn-email {
  border: 2px solid #ea4335;
  color: var(--whites) !important;
  background-color: #ea4335;
}
.section-product .box-promotion .box-button-social .btn-email:hover {
  color: #ea4335 !important;
  background-color: transparent;
}
.section-product .box-promotion .box-button-social .btn-tel {
  border: 2px solid var(--sub-main2);
  color: var(--whites) !important;
  background-color: var(--sub-main2);
}
.section-product .box-promotion .box-button-social .btn-tel:hover {
  color: var(--sub-main2) !important;
  background-color: transparent;
}
.section-product .box-card-product {
  border: 1px solid var(--shadow-navbar-color);
  border-radius: var(--radius);
  margin-top: 2rem;
  padding: 1.5rem 1.2rem;
  position: relative;
}
.section-product .box-card-product:hover {
  box-shadow: 5px -1px 3px -1px var(--shadow-navbar-color);
}
.section-product .box-card-product:hover .box-image .img-product {
  transform: scale(1.05);
}
.section-product .box-card-product .box-logo-flashsale {
  background-color: var(--main);
  display: inline;
  padding: 0.4rem 1.5rem;
  color: var(--whites);
  border-top-left-radius: var(--radius);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  font-size: 14px;
  position: absolute;
  left: -1px;
  top: 0;
}
.section-product .box-card-product .box-image {
  margin-top: 3rem;
}
.section-product .box-card-product .box-image .img-product {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  min-height: 280px;
  max-height: 280px;
}
.section-product .box-card-product .box-image .img-product:hover {
  transform: scale(1.05);
}
.section-product .box-card-product .box-content {
  position: relative;
  height: 150px;
}
.section-product .box-card-product .box-content .box-catagory-product .name-catagory-product {
  color: var(--main);
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 2px !important;
}
.section-product .box-card-product .box-content .box-catagory-product .name-product {
  color: var(--blacks);
  font-weight: 500;
  margin-bottom: 2px !important;
}
.section-product .box-card-product .box-content .btn-view-product {
  border-radius: var(--radius);
  padding: 0.4rem;
  font-weight: 500;
  border: 2px solid var(--main);
  color: var(--main) !important;
  position: absolute;
  bottom: 5%;
  width: 100%;
}
.section-product .box-card-product .box-content .btn-view-product:hover {
  color: var(--whites) !important;
  background-color: var(--main);
}
.section-product .pagination-custom {
  margin-top: 3rem;
}
.section-product .pagination-custom .pagination .active a {
  color: var(--whites) !important;
  background-color: var(--main) !important;
  border-color: var(--main);
}
.section-product .pagination-custom .pagination .page-item .page-link {
  padding: 0.5rem 1rem;
  color: var(--blacks);
}

.box-contact {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.box-contact .box-input {
  width: 100%;
  text-align: left;
  margin-bottom: 1rem;
}
.box-contact .box-input .name-input {
  font-size: 14px;
}
.box-contact .box-input .form-control {
  width: 100%;
  border: 1px solid var(--grays) !important;
  font-size: 13px !important;
}
.box-contact .box-input .form-control:focus {
  border-color: var(--sub-main2) !important;
}
.box-contact .box-input .form-control::-moz-placeholder {
  font-size: 12px;
  color: var(--grays) !important;
  opacity: 0.8;
  font-weight: 500;
}
.box-contact .box-input .form-control::placeholder {
  font-size: 12px;
  color: var(--grays) !important;
  opacity: 0.8;
  font-weight: 500;
}
.box-contact .box-input .textarea {
  min-height: 150px;
}
.box-contact .captcha {
  width: 250px;
}
.box-contact .box-button {
  text-align: left;
  margin-top: 1rem;
}
.box-contact .box-button .btn-sendmessage {
  color: var(--whites) !important;
  background: var(--sub-main2) !important;
  border: 1px solid var(--sub-main2) !important;
  border-radius: var(--radius);
  max-width: 160px;
  padding: 0.5rem 1rem !important;
  margin-bottom: 2rem;
  font-size: 14px;
}
.box-contact .box-button .btn-sendmessage:hover {
  color: var(--sub-main2) !important;
  background: var(--whites) !important;
}

@keyframes flip-top {
  to {
    transform: rotateX(90deg);
  }
}
@keyframes flip-bottom {
  to {
    transform: rotateX(0deg);
  }
}
.box-countdown .cards {
  text-align: center;
  font-size: 25px;
}
.box-countdown .cards p {
  color: var(--main2);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}
.box-countdown .cards .flip-card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.box-countdown .cards .top-half,
.box-countdown .cards .bottom-half,
.box-countdown .cards .top-flip,
.box-countdown .cards .bottom-flip {
  color: var(--whites);
  font-size: 35px;
  height: 49px;
  width: 100%;
  padding: 23px 7px;
  overflow: hidden;
  text-align: center;
  will-change: transform !important;
}
.box-countdown .cards .top-half,
.box-countdown .cards .top-flip {
  color: var(--whites);
  border-radius: 0.65rem 0.65rem 0 0;
  background-color: var(--main2);
}
.box-countdown .cards .top-half::before,
.box-countdown .cards .top-flip::before {
  content: "";
  background-color: rgb(25, 26, 36);
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
  bottom: -5px;
  left: -5px;
}
.box-countdown .cards .top-half::after,
.box-countdown .cards .top-flip::after {
  content: "";
  background-color: rgb(25, 26, 36);
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
  bottom: -5px;
  right: -5px;
}
.box-countdown .cards .bottom-half,
.box-countdown .cards .bottom-flip {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-radius: 0 0 0.65rem 0.65rem;
  background-color: var(--main2);
}
.box-countdown .cards .bottom-half::before,
.box-countdown .cards .bottom-flip::before {
  content: "";
  background-color: rgb(25, 26, 36);
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
  top: -5px;
  left: -5px;
}
.box-countdown .cards .bottom-half::after,
.box-countdown .cards .bottom-flip::after {
  content: "";
  background-color: rgb(25, 26, 36);
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
  top: -5px;
  right: -5px;
}
.box-countdown .cards .top-flip {
  position: absolute;
  transform-origin: bottom;
  transform: rotateX(0deg);
  animation: flip-top 0.5s ease-in forwards;
}
.box-countdown .cards .bottom-flip {
  position: absolute;
  bottom: 0;
  transform-origin: top;
  transform: rotateX(90deg);
  animation: flip-bottom 0.5s ease-out 0.5s;
}

.section-product-detail {
  padding-top: var(--top-section);
  padding-bottom: var(--top-section);
}
@media screen and (max-width: 1024px) {
  .section-product-detail {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.section-product-detail .box-product-detail .box-product-content .name-catagory-product {
  color: var(--main);
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 2px !important;
}
.section-product-detail .box-product-detail .box-product-content .name-product {
  color: var(--blacks);
  font-weight: 600;
}
.section-product-detail .box-product-detail .box-product-content .sub-content-product {
  font-size: 14px;
  line-height: 25px;
  color: var(--blacks);
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-product {
  border-radius: var(--radius);
  margin-right: 10px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  margin-top: 1rem;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .section-product-detail .box-product-detail .box-product-content .box-button-social .btn-product {
    width: 100%;
  }
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-line {
  border: 2px solid #06c755;
  color: var(--whites) !important;
  background-color: #06c755;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-line:hover {
  color: #06c755 !important;
  background-color: transparent;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-facebook {
  border: 2px solid #1877f2;
  color: var(--whites) !important;
  background-color: #1877f2;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-facebook:hover {
  color: #1877f2 !important;
  background-color: transparent;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-email {
  border: 2px solid #ea4335;
  color: var(--whites) !important;
  background-color: #ea4335;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-email:hover {
  color: #ea4335 !important;
  background-color: transparent;
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-tel {
  border: 2px solid var(--sub-main2);
  color: var(--whites) !important;
  background-color: var(--sub-main2);
}
.section-product-detail .box-product-detail .box-product-content .box-button-social .btn-tel:hover {
  color: var(--sub-main2) !important;
  background-color: transparent;
}
.section-product-detail .detail-tab {
  margin-top: 2rem;
}
.section-product-detail .detail-tab .nav-link {
  font-weight: 500;
}
.section-product-detail .detail-tab a.active {
  border-bottom: 2px solid var(--main);
  border-top: none;
  border-left: none;
  border-right: none;
}
.section-product-detail .detail-tab p {
  margin-top: 1rem;
  font-size: 14px;
}
.section-product-detail .table-custom {
  font-size: 14px;
}
.section-product-detail .table > thead > tr > th {
  background-color: var(--main) !important;
  color: var(--whites);
  font-weight: 500;
}/*# sourceMappingURL=style.css.map */