:root {
  --black-600: #232622;
  --black-500: #303030;
  --black-300: rgba(48, 48, 48, 0.7);
  --blue: #1866DA;
  --blue-400: rgba(216, 241, 250, 0.7);
  --blue-300: rgba(24, 102, 218, 0.5);
  --blue-200: #67c7f7;
  --yellow: #F8C437;
  --red: #EB0E0E;
  --gray: #808080;
  --gray-100: #bdbdbd;
  --gray-200: #EDEDED;
  --gray-f5: #F5F5F5;
  --blue-100: #D8F1FA;
  --text-desc: #6F7780;
}

* {
  box-sizing: border-box;
}

body {
  font-size: 14px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  color: var(--black-500)
}

a {
  text-decoration: none !important;
}

a:hover {
  color: var(--black-500)
}

main {
  min-height: 500px;
}

input:focus {
  outline: unset !important;
}

.error {
  border: 1px solid #ff7d7d !important;
}

/* ---- background ---  */

/* background color */
.gradient-blue {
  background-image: linear-gradient(180deg, rgba(24, 102, 218, 0.6), rgba(24, 102, 218, 1));
}

.bg-black-600 {
  background-color: var(--black-600);
}

.bg-blue-100 {
  background-color: rgba(25, 130, 196, 0.1);
}

.bg-blue-100x {
  background-color: var(--blue-100);
}
.bg-blue {
  background-color: var(--blue)
}
.border-blue-100 {
  border-color: var(--blue-100);
}

/* text color */

.text-blue {
  color: var(--blue);
}

.text-black-500 {
  color: var(--black-500);
}

.text-black-300 {
  color: var(--black-300);
}

.text-gray {
  color: var(--gray)
}

.text-desc {
  color: var(--text-desc)
}

.text-red {
  color: var(--red);
}


/*  ===== FONT ===== */
.font-xs {
  font-size: 10px;
}

.font-sm {
  font-size: 13px;
}

.font-base {
  font-size: 14px;
}

.font-md {
  font-size: 16px;
}

.font-lg {
  font-size: 18px;
}

.font-xl {
  font-size: 20px;
}

.font-2xl {
  font-size: 24px;
}

.font-3xl {
  font-size: 32px;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.line-height-22 {
  line-height: 22px;
}


.letter-spacing--3 {
  letter-spacing: -0.03em;
}

.font-helvetica {
  font-family: 'Helvetica Neue', sans-serif;
}

.text-gradient {
  background: linear-gradient(to bottom, rgba(24, 102, 218, 0.6), rgba(24, 102, 218, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.font-initial {
  font-size: initial !important;
}
/* ==== END FONT==== */

/* ============= Border =========== */
.border-blue {
  border-color: var(--blue) !important;
}

.border-blue-100 {
  border-color: var(--blue-100) !important;
}

.border-bluex-100 {
  border-color: var(--blue-100) !important;
}

.border-yellow {
  border-color: var(--yellow) !important;
}

.border-gray-100 {
  border-color: var(--gray-100) !important;
}

.border-gray-200 {
  border-color: var(--gray-200) !important;
}

.border-gray-f5 {
  border-color: var(--gray-f5) !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.rounded-5 {
  border-radius: 5px !important;
}

/* ============= End Border ============= */
.overflow-hidden {
  overflow: hidden;
}

/* =========== Sizing =========== */
.mw-290 {
  max-width: 290px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.py-2px {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.px-32 {
  padding-right: 32px !important;
  padding-left: 32px !important;
}
.px-40 {
  padding-right: 40px !important;
  padding-left: 40px !important;
}

.px-24 {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

.pl-24 {
  padding-left: 24px;
}

.py-32 {
  padding-bottom: 32px !important;
  padding-top: 32px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.mx--8 {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-20 {
  margin-bottom: 20px;
}

.p-20 {
  padding: 20px;
}

.pt-24 {
  padding-top: 24px;
}
.pt-12 {
  padding-top: 12px;
}
.pb-12 {
  padding-bottom: 12px;
}

.pb-32 {
  padding-bottom: 32px;
}

.pb-70 {
  padding-bottom: 70%;
}

.pb-100 {
  padding-bottom: 100%;
}

.pb-110 {
  padding-bottom: 110%;
}

.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-12 {
  margin-top: 12px;
}

.ml-12 {
  margin-left: 12px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-64 {
  margin-top: 64px;
}

.w-175 {
  width: 175px;
}

.m-h-42 {
  min-height: 42px;
}
.text-white {
  color: white;
}
/* ============== End Sizing ============== */
/* Search */

.searchTerm {
  width: 250px;
  height: 32px;
}

/* end search */
/* =========== header ========= */
.menu .title.active {
  font-weight: bold;
  color: var(--red) !important;
}
.menu .title {
  color:white !important;
}
.menu:hover .title {
  color: var(--red) !important;
}
.menu .icon-arrow {
  width:16px;
  height: 16px;
}
.menu .icon-arrow {
  background-image: url('../images/Icons/arrow-bottom-w.png')
}
.menu:hover .icon-arrow {
  background-image: url('../images/Icons/arrow-bottom-r.png')
}
.menu {
  position: relative;
}

.menu .sub-menu {
  position: absolute;
  /* min-width: 300px; */
  text-transform: initial;
  display: none;
  z-index: 100;
  width: max-content;

}

.menu .sub-menu li:hover {
  background-color: var(--blue-100);
}

.menu:hover .title {
  font-weight: 700;
}

.menu:hover .sub-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}

.pointer {
  cursor: pointer;
}

.cta {
  position: fixed;
  bottom: 135px;
  right: 16px;
  z-index: 1000;
}

.backtotop {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
}

/* .sub-menu::before {
  content: "";
  position: inherit;
  top: -10px;
  left: 30px;
  border-bottom: 10px solid var(--blue-100);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
} */
.submenu-title {
  position: relative;
}

.submenu-title .sub-sub-menu {
  position: absolute;
  text-transform: initial;
  display: none;
  z-index: 101;
  top: 0;
  right: -200px;
  min-width: 200px;
}

.submenu-title:hover .sub-sub-menu {
  display: block;
}

/* ========= End header========== */
/* ============== Slider index ================ */
.owl-carousel {
  position: relative;
}

.owl-carousel .owl-dots {
  position: absolute;
  display: flex;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 0);
}

.owl-carousel .owl-dots .owl-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px
}

.owl-carousel .owl-dots .owl-dot span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--blue-300);
}

.owl-carousel .owl-dots .owl-dot.active span {
  background-color: var(--blue);
}

.owl-carousel .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 16px
}


.owl-carousel .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 16px
}

.owl-carousel .item img {
  display: block;
  width: 100%;
  object-fit: cover;
}

#owl-slider .item {
  height: 525px;
}

#owl-blog .item img {
  height: 300px
}

#owl-member .owl-item img {
  width: auto !important;
  height: auto !important;
}
#owl-partner {
  margin-top: 16px;
  margin-bottom: 16px;
}
#owl-partner .owl-item .item {
  padding: 8px;
}
#owl-partner .owl-item .item .__item {
  width: 100%;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position:center;
}

/* ============== End Slider index ================ */
.eye-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.logo {
  width: 85px;
  height: 85px;
}

.main {
  margin-top: 108px;
  display: flex;
}

.main-content {
  width: 75%;
}

.ads {
  width: 25%;
  padding-left: 32px;
}

.img-about-us {
  width: 100%;
  padding-bottom: 85%;
}

.bg-ccn {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.bg-ccnx {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.read-more {
  padding: 8px 20px;
}

.banner-aboutus {
  margin-top: 64px;
  width: 100%;
  padding-bottom: 150px;
}

.about-us .about-us-title,
.blog .blog-big-title,
.member-title .big-title,
.page-content .content-title {
  font-size: 32px;
}

.multifaceted,
.blog,
.document,
.partner {
  margin-top: 64px;
}

.multifaceted .function {
  padding: 20px;
}
.multifaceted .function .function-title {
  min-height: 72px;
}
.blog .big-article .img-big-article {
  width: 100%;
  padding-bottom: 60%;
}

.blog .ads-blog .ads-blog-item {
  padding-bottom: 36%;
}

.blog .ads-blog {
  margin-top: 64px;
}

.list-article .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text2line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text1line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text3line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.h-53 {
  height: 53px;
}

.trapezoid-blue {
  border-radius: 5px 5px 0 0;
  border-bottom: 50px solid var(--blue);
  border-left: 0px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
}

.document-title .trapezoid-blue {
  width: 300px;
}

.partner-title .trapezoid-blue {
  width: 200px;
}

.trapezoid-yellow {
  border-radius: 5px 5px 0 0;
  border-bottom: 40px solid var(--yellow);
  border-left: 0px solid transparent;
  border-right: 40px solid transparent;
  height: 0;
}

.rate-title {
  position: relative;
  height: 25px;
}

.rate-title .trapezoid-yellow {
  border-bottom: 20px solid var(--yellow);
  border-right: 20px solid transparent;
}



.rate-title .trapezoid-blue {
  border-bottom: 25px solid var(--blue);
  border-right: 25px solid transparent;
}

.blog-title .trapezoid-yellow {
  border-bottom: 32px solid var(--yellow);
  border-right: 32px solid transparent;
}

.blog-title .trapezoid-blue {
  border-bottom: 42px solid var(--blue);
  border-right: 42px solid transparent;
}

.document-title .trapezoid-yellow,
.partner-title .trapezoid-yellow {
  width: 200px;
}

.blog-title {
  height: 40px;
}

.blog-title .trapezoid-blue {
  width: 270px;
}

.blog-title .trapezoid-yellow {
  width: 200px;
}

.document .document-title,
.partner .partner-title {
  position: relative;
  height: 50px;
}

.document .document-title .bg-after,
.partner-title .bg-after,
.rate-title .bg-after,
.blog-title .bg-after {
  position: absolute;
  z-index: 2;
  bottom: 0;
}

.document .document-title .bg-before,
.partner-title .bg-before,
.blog-title .bg-before {
  position: absolute;
  z-index: 3;
  bottom: 0;
  font-size: 32px;
}

.blog-title .bg-before {
  font-size: 24px;
}

.rate-title .bg-before {
  position: absolute;
  z-index: 3;
  bottom: 0;
}

.document .document-title .bg-after {
  left: 130px;
}

.blog-title .bg-after {
  left: 90px;
}

.partner-title .bg-after {
  left: 25px;
}

.rate-title .bg-after {
  left: 15px;
}

/* ============== */
.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 320px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  /* overflow-y: auto; */
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 1rem;
}

/*Left*/
.modal.left.fade .modal-dialog {
  left: -320px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

.modal-backdrop.fade.in {
  opacity: 0.6;
}

/* ----- MODAL STYLE ----- */
.modal-content {
  border-radius: 0;
  border: none;
  position: relative;
}

.modal-content .modal-header .close {
  background-color: white;
  position: absolute;
  left: -48px;
  opacity: 1;
  top: 57px;
  width: 48px;
  height: 48px;
  border-radius: 5px 0 0 5px;
  padding: 5px;
}

.modal-header {
  border-bottom-color: var(--gray-f5);
  border-width: 2px;
}

.fade.in {
  opacity: 1;
}

/* ----- MODAL STYLE ----- */
.modal-content {
  border-radius: 0;
  border: none;
}

/* === Breadcrumd =====*/
.breadcrumb {
  background-color: initial;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: '';
  /* background-image:url("../images/Icons/breadcrum-next.png") */
}

/* =======Giới thiệu ====== */
.main-page-content {
  padding-left: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.about-page {
  position: relative;
}
.main-page-content .page-content .content table, .main-page-content .page-content .content img {
  max-width: 100% !important;
}
/* =============== */


/* Page contact */

.contact-map iframe {
  width: 100%;
  min-height: 450px;
}

.contact-form input,
.contact-form textarea {
  border: 1px solid var(--blue-200)
}

/* ========== */

.blog-articles {
  margin-top: 32px;
}

.article .article-content .article-title {
  font-size: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.author-info .author-name {
  font-size: 16px;
}

#owl-viewdesc .time-circle img {
  width: auto !important;
  height: auto !important
}

/* ====== Collection ========= */
.collection-page .content {
  margin-top: 32px;
}

.list-brand {
  list-style: none;
}
.w-full {
  width:100%;
}
.article-content div {
  width: 100% !important;
}
/* ====== End Collection ========= */
/* =========== Checkbox ========== */

.checkbox,
.radio {
  margin-bottom: 6px;
}

.checkbox.inline,
.radio.inline {
  display: inline-block;
  vertical-align: top;
  margin-right: 18px;
}

.checkbox.inline:last-child,
.radio.inline:last-child {
  margin-right: 0;
}

.checkbox label,
.radio label {
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"],
.radio input[type="checkbox"],
.radio input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.checkbox .custom-checkbox,
.checkbox .custom-radio,
.radio .custom-checkbox,
.radio .custom-radio {
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 0 0;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid rgba(24, 102, 218, 0.6);
  position: relative;
}
.radio .custom-radio {
  width: 24px;
  height:24px
}

.checkbox .custom-checkbox {
  border-radius: 2px;
  background: var(--blue);
  transition: box-shadow 180ms ease;
  box-shadow: inset 0 0 0 12px #fff;
}

.checkbox .icon-check {
  width: 12px;
  height: 12px;
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 2px;
  transform: scale(0);
  transition: all 180ms ease;
}

.checkbox input[type="checkbox"]:checked+.custom-checkbox {
  border-color: #1866DA;
  box-shadow: none;
}

.checkbox input[type="checkbox"]:checked+.custom-checkbox .icon-check {
  transform: scale(1);
}

.radio .custom-radio {
  border-radius: 18px;
  background: var(--blue);
  box-shadow: inset 0 0 0 12px #fff;
  transition: all 180ms ease;
  top: -2px;
}

.radio input[type="radio"]:checked+.custom-radio {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 4px #fff;
}

.icon-check {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20baseProfile%3D%22tiny%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.483%201.992l-7.186%207.066-3.778-3.715-2.518%202.475%205.037%204.954%201.259%201.237%209.704-9.541-2.518-2.476z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================== */
/* ====== Product ========= */
.product .product-content .product-title {
  font-size: 28px;
}

.product .product-content .product-price {
  margin-top: 32px;
}

#sync2 .item {
  border: 1px solid var(--gray-f5);
}

#sync2 .active.synced .item {
  border: 1px solid var(--blue);
}

#sync2 .owl-nav .owl-prev {
  left: -16px;
}

#sync2 .owl-nav .owl-next {
  right: -16px;
}

/* ====== End Product ========= */

/* ========= Pagination ========== */
#pagination .page_nav {
  display: flex;
  list-style: none;
  padding: 0;
}

#pagination .page_nav li {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9E9E9 100%);
  border: 1px solid #F1F1F1;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
}

#pagination .page_nav li.active {
  background: linear-gradient(180deg, #EAEAEA 0%, #CECECE 100%);
  border: 1px solid #DEDEDE;
  box-sizing: border-box;
}

#pagination .page_nav li a {
  color: var(--black-500)
}
.list-answer {
  padding-left: 8px;
  list-style: none;
  padding-top: 16px;
}
td, th {
  border: 1px solid #f5f5f5;
  text-align: left;
  padding: 8px;
}
table.list-survey tr:nth-child(even) {
  background-color: #f5f5f5;
}
.ans-textarea {
  width: 60%
}
.multifaceted .mini-title, .blog .mini-title,.member .mini-title, .about-us .mini-title {
  font-size:32px;
}
#owl-multifaceted.owl-carousel .item img {
  width: 60% !important;
  height: auto !important;
}
/* ========= End Pagination ========== */
@media only screen and (min-width: 576px) {
  .eye-container {
    max-width: 540px;
  }
}

@media only screen and (min-width: 768px) {
  .eye-container {
    max-width: 720px;
  }
}

@media only screen and (min-width: 992px) {
  .eye-container {
    max-width: 960px;
  }
  .slider {
    position: relative;
  }
  .member {
    padding: 24px;
    background: white;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    border-radius: 10px;
    transform: translate(-50%,50%);
    box-shadow: 0 15px 20px rgb(0 0 0 / 10%);
  }
  .main {
    margin-top:160px;
  }
 
}

@media only screen and (min-width: 1440px) {
  .eye-container {
    max-width: 1274px;
  }
}


@media only screen and (max-width: 768px) {
  
.multifaceted .mini-title, .blog .mini-title, .member .mini-title, .about-us .mini-title{
  font-size:20px;
}
  .ans-textarea {
    width: 100%
  }
  .w-md-100 {
    width: 100%;
  }

  .multifaceted,
  .blog,
  .document,
  .member,
  .partner {
    margin-top: 48px;
  }

  .logo {
    width: 60px;
    height: 60px;
  }

  .owl-carousel .owl-nav {
    display: none;
  }
  
  .owl-carousel .item img {
    height: 500px !important;
  }
  #owl-multifaceted.owl-carousel .item img {
    width: 60% !important;
    height: auto !important;
  }
  #owl-slider .item {
    height: 425px !important;
  }

  .main-content {
    width: 100%;
  }

  .ads {
    width: 100%;
    margin-top: 32px;
    padding-left: 0;
  }

  .main {
    margin-top: 32px;
    flex-direction: column;
  }

  .about-us .about-us-title,
  .multifaceted .multifaceted-title,
  .blog .blog-big-title,
  .document .document-title .bg-before,
  .partner-title .bg-before,
  .member-title .big-title,
  .page-content .content-title {
    font-size: 24px;
  }

  .banner-aboutus {
    margin-top: 24px;
    padding-bottom: 100px;
  }

  .blog .list-article {
    margin-top: 24px;
  }

  .blog .ads-blog {
    margin-top: 32px;
  }

  .blog-title .trapezoid-blue {
    font-size: 20px;
  }

  .trapezoid-blue,
  .blog-title .trapezoid-blue {
    border-bottom: 33px solid var(--blue);
    border-right: 33px solid transparent;
  }

  .blog-title .trapezoid-blue {
    width: 235px;
  }

  .blog-title .trapezoid-yellow {
    width: 165px;
  }

  .document-title .trapezoid-blue {
    width: 200px;
  }

  .partner-title .trapezoid-blue {
    width: 150px;
  }

  .trapezoid-yellow,
  .blog-title .trapezoid-yellow {
    border-bottom: 25px solid var(--yellow);
    border-right: 25px solid transparent;
  }

  .document-title .trapezoid-yellow,
  .partner-title .trapezoid-yellow {
    width: 150px;
  }

  .document .document-title .bg-after {
    left: 70px;
  }

  .document .document-title,
  .partner .partner-title {
    position: relative;
    height: 33px;
  }

  .partner .partner-title {
    margin-bottom: 16px;
  }

  .owl-carousel .owl-dots {
    background-color: rgba(255, 255, 255, 0.5);
    height: 5px;
    border-radius: 5px;
    overflow: hidden;
  }

  .owl-carousel .owl-dots .owl-dot {
    width: 25px;
    height: auto;
    border-radius: 3px;
    display: initial;
    margin: 0;
    background-color: initial;
  }


  .owl-carousel .owl-dots .owl-dot span {
    width: 100%;
    height: 100%;
    background-color: initial;
  }

  .owl-carousel .owl-dots .owl-dot.active {
    background-color: white;
  }

  .main-page-content {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  

  .main-page-content .page-breadcrumb {
    border-bottom: 1px solid var(--gray-100);
  }

  .category-page {
    width: 48px;
    height: 48px;
    position: fixed;
    right: 0;
    top: 175px;
    background-color: white;
    z-index: 100;
    border: 1px solid #FAFAFA;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    border-radius: 8px 0px 0px 8px;
    padding: 10px
  }

  .article .article-content .article-title {
    font-size: 20px;
  }

  .article .article-content img {
    max-width: 100%;
    height: auto;
  }

  .author-info .author-img img {
    width: 48px;
    height: 48px;
  }

  .author-info .author-name {
    font-size: unset;
  }

  .collection-page .collection-content {
    margin-top: 24px;
  }

  /* ====== Product ========= */
  .product .product-content .product-title {
    font-size: 20px;
  }

  .product .product-content .product-price {
    margin-top: 16px;
  }

  /* ====== End Product ========= */


}

@media only screen and (max-width: 425px) {
  .logo {
    width: 40px;
    height: 40px;
  }

  .owl-carousel .item img {
    height: 250px !important;
  }
  #owl-slider .item {
    height: 250px !important;
  }
  #owl-blog .item img,
  #owl-collection .item img {
    height: 200px !important;
  }


  .banner-aboutus {
    padding-bottom: 70px;
  }

  .multifaceted .function {
    padding: 10px;
  }
 
  .ads-blog div:nth-child(2) {
    margin-top: 8px;
  }

  .contact-map iframe {
    min-height: 350px;
  }

  .mt-xs-32 {
    margin-top: 32px;
  }

  .mb-xs-16 {
    margin-bottom: 16px;
  }

  #sync1 .item {
    position: relative;
  }

  #sync1 .item span {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    padding: 2px 8px;
  }
}

/* ============ END RESPONSIVE ============ */