/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

html {
  scroll-behavior: smooth;
}

/* Add margin to body to prevent content jump */
body {
  padding-top: 184px; /* Adjust based on your header + menu height */
}

/* Các tùy chỉnh CSS của giao diện nên để vào đây */
.footer-menus .panel-heading {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}

/* Custom background images */
.bg-introduce {
  background-image: url("../images/bg-introduce.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-customer {
  background-image: url("../images/bg-customer.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.price-table {
  border-radius: 50px;
  overflow: hidden;
  width: 100%;
  box-shadow: 2px 3px 10px rgba(0, 71, 147, 0.15);
  margin-bottom: 30px;
}

.price-table table th {
  background: #144a91;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  padding: 20px 10px;
  text-align: center;
  border: solid;
}

.price-table table td {
  padding: 20px 10px;
  text-align: center;
  font-size: 20px;
  background: #eef1f5;
  border: solid #fff;
}

.price-table table tr:nth-child(even) td {
  background: #fff;
}

.price-table {
  display: none;
}
.price-table-active {
  display: block !important;
}

.about-section-title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 30px;
  margin-top: 10px;
  font-weight: 600;
  color: #144a91;
}
.about-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  z-index: 1;
  background: #2f77d7;
  width: 361px;
  height: 2px;
}

.bg-box-content {
  background: linear-gradient(
    235deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(220, 253, 255, 0.67) 33%,
    rgba(242, 253, 255, 1) 67%,
    rgba(208, 245, 255, 1) 100%
  );
  padding: 15px 15px 50px 15px;
}

.about-no {
  display: flex;
  align-items: center;
  padding: 3px 40px;
  border-radius: 20px;
  background: linear-gradient(
    235deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(220, 253, 255, 0.67) 33%,
    rgba(242, 253, 255, 1) 67%,
    rgba(208, 245, 255, 1) 100%
  );
  max-width: fit-content;
  margin: 0 auto;
  margin-bottom: 30px;
}

.list-about-02 {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

.list-about-02 li {
  padding-left: 35px;
  margin-bottom: 15px;
  position: relative;
  font-size: 17px;
}

.list-about-02 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  z-index: 1;
  background: url(../images/icons/icon-checker.svg) center top no-repeat;
  background-size: contain;
}

.about-inner {
  position: relative;
  background: rgba(229, 242, 255, 0.2);
  border: dashed 2px #8ebfff;
  border-radius: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  max-width: 258px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  width: 258px;
}

.about-inner::before {
  content: "";
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 100%;
  width: 90%;
  height: 90%;
  left: 0;
  right: 0;
  top: 12px;
  margin: 0 auto;
  position: absolute;
  box-shadow: 2px 3px 5px rgba(0, 71, 147, 0.15);
}

.about-linear-gradient {
  background: linear-gradient(
    235deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(220, 253, 255, 0.67) 33%,
    rgba(242, 253, 255, 1) 67%,
    rgba(208, 245, 255, 1) 100%
  );
}

.about-numbers {
  background: linear-gradient(
    0deg,
    rgba(249, 253, 255, 1) 0%,
    rgba(216, 248, 255, 1) 100%
  );
}

.about-number-item .number {
  width: 200px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #c3f2ff;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 100%;
  display: block;
}

.about-number-item .number span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 100%;
  color: #0a50ac;
  font-size: 45px;
  font-family: "Unbounded", serif;
  font-weight: 800;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.s-text {
  border-top-left-radius: 45px;
  border-bottom-right-radius: 45px;
  background: linear-gradient(
    235deg,
    rgba(253, 250, 250, 1) 0%,
    rgba(227, 253, 255, 0.67) 50%,
    rgba(242, 253, 255, 1) 100%
  );
  padding: 45px 33px;
  box-shadow: 2px 3px 15px rgba(0, 71, 147, 0.15);
  max-width: 390px;
  font-size: 20px;
  color: #222;
  margin: 0 auto;
}

.about-last-section {
  background: linear-gradient(
    0deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(255, 250, 249, 1) 50%,
    rgba(249, 253, 255, 1) 100%
  );
}

.btn-readmore {
  background: #ffb602;
  color: #fff;
  text-transform: uppercase;
  padding: 12px 45px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  line-height: normal;
  transition: all 0.3s;
  min-width: 150px;
  border-radius: 30px;
  cursor: pointer;
}

.btn-readmore-small {
  background: #ffb602;
  color: #fff;
  text-transform: uppercase;
  padding: 8px 10px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  line-height: normal;
  transition: all 0.3s;
  min-width: 150px;
  border-radius: 30px;
  cursor: pointer;
}

.btn-readmore:hover,
.btn-readmore-small:hover {
  color: #fff;
  background: #004793;
}

.warranty-item strong {
  color: #1a67b9;
}

.review-image-slider .slick-track {
  display: flex;
}

.expert-certificate strong {
  color: #004793;
}

.box-expert {
  background-color: #f5f5f5;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #c4d5e5;
  box-shadow: 2px 3px 20px rgba(0, 71, 147, 0.15);
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}

.bg-page-expert-3 strong {
  color: #004793;
}

ul.slick-dots {
  text-align: center;
}

.home-slider ul.slick-dots {
  bottom: 30px;
}

ul.slick-dots li {
  display: inline-block;
  margin: 0 8px;
}

ul.slick-dots li > button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #87ceeb;
  background: transparent;
  font-size: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

ul.slick-dots li > button:before {
  display: none;
}

ul.slick-dots li.slick-active > button {
  background: #ffffff;
  border-color: #ffd700;
  transform: scale(1.2);
}

ul.slick-dots li > button:hover {
  background: #87ceeb;
  border-color: #87ceeb;
  transform: scale(1.1);
}

#page-bodyhtml h2 {
  background: transparent;
  color: #004793;
  padding: 10px 0;
  font-weight: 700;
  font-size: 30px;
  position: relative;
  margin-bottom: 20px;
}

#page-bodyhtml h2::before {
  background: #ffb602;
  height: 2px;
  width: 160px;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
}

.s-boxtext {
  background: linear-gradient(
    245deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(220, 253, 255, 1) 33%,
    rgba(242, 253, 255, 1) 67%,
    rgba(208, 245, 255, 1) 100%
  );
  padding: 45px;
  padding-bottom: 35px;
  border-top-left-radius: 45px;
  border-bottom-right-radius: 45px;
  position: relative;
  text-align: center;
  color: #144a91;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 100px;
}

.s-boxtext::before {
  content: "";
  position: absolute;
  left: -100px;
  bottom: -50px;
  width: 250px;
  height: 190px;
  background: url(../images/omotenashi/layer-flower-large.webp) center center
    no-repeat;
  background-size: contain;
  z-index: 1;
}

.s-boxtext::after {
  content: "";
  position: absolute;
  right: -96px;
  top: -16px;
  width: 140px;
  height: 77px;
  background: url(../images/omotenashi/layer-flower-small.webp) center center
    no-repeat;
  background-size: contain;
  z-index: 1;
}

.omotenashi-text b {
  color: #144a91;
}

.s-boximage {
  background: #fff;
  padding: 15px;
  box-shadow: 2px 3px 15px rgba(0, 71, 147, 0.15);
}

.s-boximage.bglinear {
  background: linear-gradient(
    245deg,
    rgba(249, 254, 255, 1) 0%,
    rgba(220, 253, 255, 1) 33%,
    rgba(242, 253, 255, 1) 67%,
    rgba(208, 245, 255, 1) 100%
  );
  padding: 15px;
  margin-bottom: 30px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.s-number span {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  background: url(../images/omotenashi/layer-number.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.s-quote {
  font-weight: 700;
  color: #144a91;
  font-size: 20px;
  margin-bottom: 25px;
  text-align: center;
}

.s-quote span {
  background: linear-gradient(
    45deg,
    rgba(208, 245, 255, 1) 0%,
    rgba(242, 253, 255, 1) 35%,
    rgba(255, 211, 228, 0.35476197314863445) 67%,
    rgba(249, 254, 255, 1) 100%
  );
  padding: 15px 30px;
  border-radius: 60px;
  display: inline-block;
}

.s-image {
  position: relative;
}

.s-image::before {
  content: url(../images/omotenashi/vector-dash-left.png);
  position: absolute;
  left: 0;
  bottom: -120px;
  z-index: 1;
}

.s-image::after {
  content: url(../images/omotenashi/vector-dash-right.png);
  position: absolute;
  right: -15px;
  top: 30%;
  z-index: 1;
}