:root {
  --color-red: #ec2d3f;
  --color-medium-red: #cc2c32;
  --color-dark-red: #c31829;
  --color-green: #28a745;
  --color-dark-green: #207d36;
  --color-black: #212529;
  --color-gray: #6c757d;
  --color-main: #093864;
  --color-footer: #fff;
  --font-main: "Montserrat", sans-serif;
  --font-title: "Montserrat", sans-serif;
}

.video_slide_height:before {
  padding-top: 46.5%;
}

.video_slide_height video {
  /* max-height: 700px; */
  /* object-fit: cover; */
  width: 100%;
  height: auto;
}

.giaiphap_ab {
  padding: 30px;
  position: absolute;
  right: 100px;
  top: 0;
  height: 100%;
  width: 300px;
  background-color: rgba(29, 86, 189, 0.8);
}

.giaiphap_ab h2 {
  font-size: 25px;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
}

ul.namegiaiphap {
  list-style: disc;
  padding-left: 20px;
}

ul.namegiaiphap li a {
  font-size: 17px;
}

ul.namegiaiphap li a:hover {
  text-decoration: none;
  color: #f37017;
}

.giaiphap_ab,
ul.namegiaiphap li a {
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
ul,
body {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 14px;
  top: 0 !important;
  font-family: var(--font-main);
}

.img_max {
  max-width: 100%;
  height: auto;
}

.img100 {
  width: 100%;
  height: auto;
}

.noidung img {
  max-width: 100%;
  height: auto !important;
}

a,
input,
textarea {
  outline: none;
  padding: 0px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.w-clear:after {
  display: block;
  content: "";
  clear: both;
}

.hidden {
  display: none;
}

.clear {
  clear: both;
}

.none {
  display: none;
}

.hidden-seoh {
  visibility: hidden;
  height: 0px;
  margin: 0px;
  overflow: hidden;
}

.maxwidth {
  max-width: 1230px;
  margin: 0px auto;
  padding: 0px 15px;
  position: relative;
}

.content-main {
  padding: 30px 0px 50px;
  position: relative;
  margin-bottom: 50px;
}

.content-main .col-md-9 {
  padding-left: 0;
  padding-right: 80px;
}

.content-main .col-md-3 {
  padding-left: 0px;
  padding-right: 0px;
}

.content-main .row {
  margin-left: 0px;
  margin-right: 0px;
}

.content-main .title-main h2 {
  font-size: 30px;
}

/* General */
.color_bg {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.bg_ga {
  background: linear-gradient(90deg,
      rgba(134, 197, 66, 1) 0%,
      rgba(216, 221, 11, 1) 100%) !important;
}

.padding_main {
  padding: 60px 0;
}

.flex-wrap-wrap {
  flex-wrap: wrap;
}

.hover_red:hover {
  color: #f37017 !important;
  text-decoration: none !important;
}

/* title main */
.title-main {
  position: relative;
  padding: 0 0 25px;
  text-align: center;
}

.title-main span {
  font-size: 17px;
  color: #000;
}

.title-main h2 {
  color: var(--color-main);
  font-size: 44px;
  position: relative;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.ul-tabs-pro-detail {
  list-style: none;
  display: block;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  margin-top: -10px;
}

.ul-tabs-pro-detail li {
  font-size: 15px;
  color: #222222;
  cursor: pointer;
  display: inline-block;
  margin: 0px 4px 9px 4px;
  position: relative;
  background: #f0f0f0;
  border-radius: 25px;
  padding: 8px 25px;
  text-transform: uppercase;
  border: 1px solid #e8e9f3;
}

.ul-tabs-pro-detail li.active,
.ul-tabs-pro-detail li:hover {
  color: #fff;
  background: #049f44;
}

.content-tabs-pro-detail {
  display: none;
  position: relative;
}

.content-tabs-pro-detail.active {
  display: block;
}

.content-tabs-pro-detail iframe {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0px !important;
  left: 0px !important;
}

.time-main {
  margin-bottom: 0.75rem;
  color: #999999;
}

.time-main i {
  vertical-align: top;
  margin: 3px 7px 0px 0px;
}

.time-main span {
  vertical-align: top;
  display: inline-block;
}

.share {
  padding: 17px 15px 10px 15px;
  line-height: normal;
  background: rgba(128, 128, 128, 0.15);
  margin-top: 15px;
  border-radius: 5px;
}

.share b {
  display: block;
  margin-bottom: 5px;
}

.control-owl {
  position: absolute;
  width: 100%;
  z-index: 2;
  left: 0px;
  top: calc(50% - 45px / 2);
}

.control-owl button {
  opacity: 0.5;
  top: 0px;
  position: absolute;
  outline: none;
  border: 0px;
  padding: 0px;
  margin: 0px;
  display: block;
  cursor: pointer;
  color: #ffffff;
  width: 45px;
  height: 45px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin: 0px;
  background-color: #000000;
  border-radius: 3px;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.control-owl button:hover {
  opacity: 1;
}

.control-owl button.owl-prev {
  left: 20px;
}

.control-owl button.owl-next {
  right: 20px;
}

.form-control,
.form-control-plaintext:not(textarea),
.custom-select {
  height: calc(1em + 1.25rem + 8px);
}

.text-sm {
  font-size: 0.875rem !important;
}

/* Lazyload */
img.lazy {
  opacity: 0;
}

img:not(.initial) {
  transition: opacity 1s;
}

img.initial,
img.loaded,
img.error {
  opacity: 1;
}

img:not([src]) {
  visibility: hidden;
}

/* Header */
.user-header a {
  color: #ffffff;
  padding-right: 9px;
  margin-right: 7px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
}

.user-header a:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 8px;
  background-color: #ffffff;
  top: calc(50% - 7px / 2);
  right: 0px;
  opacity: 0.7;
}

.user-header a:last-child {
  padding-right: 0px;
  margin-right: 0px;
}

.user-header a:last-child:after {
  display: none;
}

/* Menu */
/* FIX: trước đây .menu để position:relative và chỉ chuyển sang
   "fixed" khi JS gắn thêm class .scroll_menu lúc cuộn trang.
   Nhưng header.tpl không có đoạn JS nào gắn class đó => menu
   không bao giờ dính lên trên. Đổi sang position: sticky để header
   luôn tự động cố định ở đầu trang khi cuộn, không cần JS. */
.menu {
  background: #fff;
  z-index: 999;
  position: sticky;
  top: 0;
}

.menu.scroll_menu {
  position: fixed;
  top: 0;
  width: 100%;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
}

.menu.scroll_menu .menu-parent {
  justify-content: space-between !important;
}

.menu.fadeInDown.animated .logo-header img {
  width: 100px;
  height: 60px;
  transition: 0.3s;
}

.menu.fadeInDown.animated .logo-header a img {
  width: 50px;
  height: 50px;
  transition: 0.3s;
}

.menu ul {
  width: 100%;
  padding: 0px;
  margin: 0;
  list-style: none;
}

.menu ul li {
  /* position:relative; */
  z-index: 99;
}

.menu ul li a {
  display: block;
  /* position:relative; */
  font-size: 17px;
  color: #000;
  padding: 0px 15px;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 40px;
}

.menu ul li a.has-child {
  padding-right: 16px;
  margin-right: 8px;
}

.menu ul li a.has-child:after {
  content: "";
  position: absolute;
  bottom: calc(50% - 4px / 2);
  right: 5px;
  width: 5px;
  height: 5px;
  border: 1px solid #fafafa;
  border-top: 0px;
  border-left: 0px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.menu ul.menu-parent>li a.active,
.menu ul.menu-parent>li:hover>a {
  color: red;
}

.menu ul li ul {
  flex-wrap: wrap;
  left: 0;
  position: absolute;
  width: 1200px;
  background-color: #efefef;
  border-radius: 0.25rem;
  -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
  box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
  -webkit-transform: perspective(600px) rotateX(-90deg);
  transform: perspective(600px) rotateX(-90deg);
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  opacity: 1;
  display: flex;
}

.menu ul li:hover>ul {
  -webkit-transform: perspective(600px) rotateX(0);
  transform: perspective(600px) rotateX(0);
  -webkit-transform-origin: 0 0 0;
  opacity: 1;
  visibility: visible;
  transition: all 0.7s;
}

.menu ul>li>ul {
  overflow-y: auto;
  max-height: 550px;
  padding-bottom: 20px;
}

.menu ul li ul li {
  margin-left: 0.75rem;
  /* padding-left:0.75rem; */
  padding-right: 0.75rem;
  width: calc(1200px / 5);
}

.menu ul li ul li ul li::marker {
  color: var(--color-main);
}

.menu ul>li>ul>li>a {
  line-height: 23px;
  font-size: 14px;
  text-align: left;
  color: #000;
}

.menu ul li ul li:last-child>a {
  border-bottom: 0px;
}

.menu ul li ul li a.has-child {
  margin-right: 0px;
}

.menu ul li ul li a.has-child:after {
  border-color: #313131;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu ul li ul li a.active,
.menu ul li ul li>a:hover {
  color: var(--color-red);
}

.menu ul li ul li:hover>a.has-child:after,
.menu ul li ul li a.active.has-child:after {
  border-color: var(--color-red);
}

.menu ul li ul li a {
  padding: 8px 0px 0px 0px;
  text-transform: capitalize;
}

.menu ul li ul li ul {
  top: 0;
  left: 81%;
  margin-top: 0px;
  position: relative;
  display: contents;
  list-style-type: disc;
}

/* Search */
.search {
  width: 230px;
  background: #ffffff;
  border: 1px solid var(--color-main);
  border-radius: 30px;
}

.search p {
  float: left;
  width: 39px;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  text-align: center;
  margin: 0px;
  color: #060606;
  font-size: 18px;
}

.search input {
  width: calc(100% - 39px);
  height: 42px;
  float: left;
  outline: none;
  padding: 0px;
  border: 0px;
  background: transparent;
  text-indent: 10px;
  font-size: 13px;
}

.search input::-webkit-input-placeholder {
  color: #878787;
}

.search input:-moz-placeholder {
  color: #878787;
}

.search input::-moz-placeholder {
  color: #878787;
}

.search input:-ms-input-placeholder {
  color: #878787;
}

/* Mmenu */
.menu-res {
  display: none;
  height: 55px;
  z-index: 999;
  background: #fff;
  position: sticky;
  line-height: normal;
  top: 0;
}

.menu-bar-res {
  height: 55px;
  padding: 0px 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#menu {
  display: none;
}

#hamburger {
  display: block;
  width: 30px;
  height: 23px;
  position: relative;
}

#hamburger:before,
#hamburger:after,
#hamburger span {
  background: var(--color-main);
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0px;
}

#hamburger:before {
  top: 0px;
}

#hamburger span {
  top: 10px;
}

#hamburger:after {
  top: 20px;
}

#hamburger:before,
#hamburger:after,
#hamburger span {
  -webkit-transition: none 0.5s ease 0.5s;
  transition: none 0.5s ease 0.5s;
  -webkit-transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}

.mm-wrapper_opening #hamburger:before,
.mm-wrapper_opening #hamburger:after {
  top: 10px;
}

.mm-wrapper_opening #hamburger span {
  left: -50px;
  opacity: 0;
}

.mm-wrapper_opening #hamburger:before {
  transform: rotate(45deg);
}

.mm-wrapper_opening #hamburger:after {
  transform: rotate(-45deg);
}

.mm-menu_opened {
  display: block !important;
}

/* Search Responsive */
.search-res {
  position: relative;
  height: 43px;
}

.search-res .icon-search {
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  color: var(--color-main);
  font-size: 15px;
  margin: 0px;
}

.search-res .icon-search.active {
  color: var(--color-main);
  background: #ffffff;
  border-radius: 100%;
}

.search-res .search-grid {
  position: absolute;
  top: 35px;
  right: 0px;
  width: 0px;
  height: 40px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-main);
  z-index: 2;
  opacity: 0;
  border-radius: 25px;
  line-height: normal;
}

.search-res .search-grid p {
  float: left;
  width: 35px;
  height: 38px;
  cursor: pointer;
  outline: none;
  border: none;
  margin: 0px;
  font-size: 17px;
  display: block;
  color: var(--color-main);
  line-height: 40px;
  text-align: center;
}

.search-res .search-grid input {
  width: calc(100% - 35px);
  float: right;
  line-height: 40px;
  outline: none;
  border: none;
  color: #000;
}

.search-res .search-grid input::-webkit-input-placeholder {
  color: #ccc;
}

.search-res .search-grid input:-moz-placeholder {
  color: #ccc;
}

.search-res .search-grid input::-moz-placeholder {
  color: #ccc;
}

.search-res .search-grid input:-ms-input-placeholder {
  color: #ccc;
}

/* Slideshow */
.slideshow {
  position: relative;
}

.slideshow-item {
  display: block;
  cursor: pointer;
  position: relative;
}

.slideshow:hover .control-slideshow {
  opacity: 1;
}

.control-slideshow {
  opacity: 0;
}

/* Partner */
.wrap-partner {
  padding: 0px 15px;
}

.wrap-partner .wrap-content {
  position: relative;
}

.partner {
  display: block;
  border: 1px solid #eee;
  max-width: 175px;
  margin: 0px auto;
}

/* Breadcrumb */
.breadCrumbs {
  background-color: #eee;
}

.breadCrumbs .wrap-content {
  padding: 0.75rem 15px;
  max-width: 1220px;
  margin: 0 auto;
}

.breadCrumbs .wrap-content .breadcrumb {
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0;
}

.breadCrumbs .wrap-content .breadcrumb-item a {
  color: var(--color-black);
}

.breadCrumbs .wrap-content .breadcrumb-item.active a {
  color: var(--color-gray);
}

/* Video */
.video {
  cursor: pointer;
  margin-bottom: 1rem;
}

.video-image {
  position: relative;
  margin-bottom: 0.75rem;
}

.video-image:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 35px;
  top: calc(50% - 50px / 2);
  left: calc(50% - 35px / 2);
  z-index: 1;
  background-repeat: no-repeat;
  background-image: url(../images/play.png);
}

.video-name {
  text-align: center;
  font-size: 16px;
  color: var(--color-black);
  margin-bottom: 0px;
}

/* Album */
.album {
  cursor: pointer;
  margin-bottom: 1rem;
}

.album-image {
  margin-bottom: 0.75rem;
}

.album-name {
  margin-bottom: 0px;
  text-align: center;
}

.album-name a {
  display: block;
  font-size: 16px;
  color: var(--color-black);
  margin-bottom: 0px;
}

/* Brand */
.wrap-brand {
  margin-bottom: 50px;
  padding: 0px 15px;
}

.wrap-brand .wrap-content {
  position: relative;
}

.brand {
  display: block;
  border: 1px solid #eee;
  max-width: 160px;
  margin: 0px auto;
}

/* Product */
.product {
  position: relative;
  margin-bottom: 20px;
  padding: 5px;
}

.product:nth-child(4n + 1) {
  clear: both;
}

.product:nth-child(4n) {
  margin-right: 0px;
}

.box-desc {
  background: #fff;
  position: relative;
  padding: 15px 10px 10px 10px;
}

.pic-product {
  position: relative;
}

.name-product {
  font-size: 18px;
  color: #000;
}

.name-product a {
  font-size: 18px;
  color: #222220;
}

.name-product a:hover {
  color: #bf1e2d;
}

.price-product {
  margin: 7px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.price-new {
  padding: 0 5px;
  font-size: 18px;
  color: #07a046;
}

.price-new a {
  color: #bf1e2d;
}

.price-old {
  padding: 0 5px;
  font-size: 18px;
  color: var(--color-gray);
  text-decoration: line-through;
}

.price-per {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #ffffff;
  background: var(--color-red);
  font-size: 11px;
  border-radius: 2px;
  width: 45px;
  height: 25px;
  text-align: center;
  line-height: 25px;
}

.cart-product {
  margin-bottom: 0px;
}

.cart-product span {
  cursor: pointer;
  width: 49%;
  float: left;
  color: #ffffff;
  text-transform: capitalize;
  text-align: center;
  padding: 7px 5px;
  border-radius: 3px;
}

.cart-add {
  margin-right: 2%;
  background-color: var(--color-red);
}

.cart-add:hover {
  background-color: var(--color-dark-red);
}

.cart-buy {
  background-color: var(--color-green);
}

.cart-buy:hover {
  background-color: var(--color-dark-green);
}

/* Product Detail */
.grid-pro-detail {
  margin-bottom: 3rem;
}

.left-pro-detail {
  position: relative;
  text-align: center;
}

.left-pro-detail img {
  max-width: 100%;
  height: auto;
}

.left-pro-detail .MagicZoom {
  border: 1px solid #eee;
  padding: 7px;
  border-radius: 5px;
  background-color: #ffffff;
}

.gallery-thumb-pro {
  position: relative;
  margin-top: 10px;
}

.owl-pro-detail {
  padding: 0px 30px;
}

.control-pro-detail button {
  background-color: transparent;
  color: #222222;
  opacity: 1;
  width: 25px;
  font-size: 23px;
}

.control-pro-detail button:hover {
  opacity: 0.7;
}

.control-pro-detail button.owl-prev {
  left: 0px;
}

.control-pro-detail button.owl-next {
  right: 0px;
}

.thumb-pro-detail {
  display: block !important;
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
}

.thumb-pro-detail.mz-thumb.mz-thumb-selected {
  border-color: #cecfd2;
}

.thumb-pro-detail img {
  box-shadow: none !important;
  filter: brightness(100%) !important;
  border-bottom: 0px !important;
  padding-bottom: 0px !important;
}

.title-pro-detail {
  text-transform: capitalize;
  font-size: 20px;
  display: block;
  font-weight: 700;
}

.comment-pro-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.social-plugin-pro-detail {
  margin-bottom: 1rem;
  margin-top: 0px !important;
}

.desc-pro-detail {
  margin-bottom: 1rem;
}

.attr-pro-detail {
  list-style: none;
  padding: 0px;
}

.attr-pro-detail li {
  margin-bottom: 0.5rem;
}

.attr-label-pro-detail {
  margin: 0px 5px 0px 0px;
}

.attr-label-pro-detail.d-block {
  display: block;
  margin: 0px 0px 5px 0px;
}

.attr-content-pro-detail {
  display: inline-block;
  margin-bottom: 0px;
}

.price-new-pro-detail {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-red);
}

.price-old-pro-detail {
  font-weight: 500;
  color: var(--color-gray);
  text-decoration: line-through;
  padding-left: 10px;
}

.color-pro-detail {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 35px;
  height: 30px;
  margin: 0px 0px 3px 0px;
  border: 1px solid transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.size-pro-detail {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 3px 10px 4px 10px;
  display: inline-block;
  position: relative;
}

.size-pro-detail.active,
.color-pro-detail.active {
  border-color: #e5101d;
  color: #e5101d;
}

.size-pro-detail.active:after,
.color-pro-detail.active:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  background-image: url(../images/check-cart.png);
}

.color-pro-detail input[type="radio"],
.size-pro-detail input[type="radio"] {
  display: none;
}

.quantity-pro-detail {
  width: 100%;
  max-width: 110px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.quantity-pro-detail span {
  line-height: 25px;
  padding: 0px;
  width: 30px;
  height: 30px;
  color: #5f5f5f;
  cursor: pointer;
  font-size: 22px;
  border: 1px solid #cccccc;
}

.quantity-pro-detail span.quantity-plus-pro-detail {
  border-left: 0px;
}

.quantity-pro-detail span.quantity-minus-pro-detail {
  border-right: 0px;
}

.quantity-pro-detail input {
  height: 30px;
  border: 1px solid #cccccc;
  width: calc(100% - 60px);
  text-align: center;
  font-size: 14px;
  padding: 5px;
}

.cart-pro-detail {
  margin-bottom: 1rem;
}

.cart-pro-detail a {
  font-size: 14px;
  color: #ffffff !important;
  text-transform: uppercase;
}

.tags-pro-detail a {
  float: left;
  font-size: 13px;
  padding-bottom: 0.375rem;
  margin: 0px 5px 5px 0px;
}

.tags-pro-detail a i {
  font-size: 11px;
  margin: 5px 5px 0px 0px;
}

.tabs-pro-detail {
  margin-top: 2rem;
}

.tabs-pro-detail .nav-tabs .nav-link {
  border-top-width: 3px;
  font-size: 13px;
}

.tabs-pro-detail .nav-tabs .nav-link.active,
.tabs-pro-detail .nav-tabs .nav-item.show .nav-link {
  border-top-color: #555555;
}

/* Toc */
.congty_tpl .box-readmore {
  padding: 0px 15px;
  /* border:1px solid #dedede; */
  margin-bottom: 2rem;
  /* border-radius:5px; */
  /* background-color:#eeeeee; */
  background: none;
  border: none;
}

.box-readmore li ul>li {
  margin: 0;
  margin-bottom: 8px;
}

.box-readmore li ul>li:before {
  content: counters(item, ".") " ";
}

.congty_tpl .box-readmore ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style-type: none;
  margin-bottom: 0px;
  padding-left: 0px !important;
  margin-top: 8px;
}

.congty_tpl .box-readmore ul li {
  padding: 5px 0;
  margin: 5px 5px 5px 12px;
  /* background: var(--color-main); */
  border-radius: 5px;
  text-align: center;
}

.box-readmore ul li:before {
  content: counters(item, ".") ". ";
  display: none;
  padding-right: 5px;
}

.congty_tpl .box-readmore ul li a {
  color: #000 !important;
  cursor: pointer;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
}

.box-readmore ul li a:hover {
  /* color: #fff !important; */
}

.congty_tpl .box-readmore ul li:hover {
  background: var(--color-main);
}

.congty_tpl .box-readmore ul li:hover a {
  color: #fff !important;
}

/* News */
.news {
  margin-bottom: 30px;
}

.news-name {
  margin-bottom: 0.7rem;
}

.news-name a {
  margin-top: 10px;
  color: #222222;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
}

.news-name a:hover {
  color: var(--color-red);
}

.news-time {
  color: #777777;
  margin-bottom: 0.25rem;
  font-size: 12px;
}

.news-desc {
  color: #333333;
  font-size: 13px;
}

.othernews b {
  color: #0e4775;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.list-news-other {
  padding-left: 17px;
  list-style: square;
}

.list-news-other li {
  margin-bottom: 10px;
}

.list-news-other li a {
  text-transform: none;
  color: #333333;
}

.list-news-other li a:hover {
  color: var(--color-red);
}

/* Contact */
.contact-article {
  margin-bottom: 3rem;
}

.contact-input {
  position: relative;
  margin-bottom: 15px;
}

.contact-input textarea {
  resize: none;
  height: 150px;
}

.contact-input .custom-file-label::after {
  content: attr(title);
}

.contact-map {
  position: relative;
  height: 500px;
  margin-top: 30px;
}

.contact-map iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100% !important;
  height: 100% !important;
}

/* Newsletter */
#newsletter {
  position: relative;
  padding: 50px 50px 50px 50px;
  text-align: center;
}

.text-newsletter {
  width: 100%;
  height: 50px;
  padding: 0px 20px;
  margin-bottom: 10px;
  background: #fff;
  outline: none;
  box-shadow: none !important;
  color: #666666 !important;
  font-size: 14px;
  border-radius: 5px;
}

textarea#content-newsletter {
  height: 140px;
  padding-top: 15px;
}

form.validation-newsletter.text-end {
  text-align: center;
}

.area-newsletter {
  width: 100%;
  height: 129px !important;
  padding: 10px 20px;
  outline: none;
  box-shadow: none !important;
  background: #ce2230;
  color: #666666 !important;
  font-size: 13px;
  border: none;
  border-radius: 20px;
  margin-bottom: 20px;
}

#newsletter ::-webkit-input-placeholder {
  color: #666666 !important;
}

#newsletter ::-moz-placeholder {
  color: #666666 !important;
}

#newsletter :-ms-input-placeholder {
  color: #666666 !important;
}

#newsletter :-moz-placeholder {
  color: #666666 !important;
}

.submit-newsletter {
  border: none;
  outline: none;
  background: var(--color-main);
  color: #fff;
  font-size: 22px;
  width: 180px;
  height: 55px;
  position: relative;
  border-radius: 10px;
  display: inline-block;
}

.submit-newsletter:hover {
  color: #fff;
  background: #f37017;
}

/* social index */
.box_social {
  display: inline-block;
  list-style: none;
}

/* Footer */
.footer {
  color: var(--color-footer);
  background: #124982;
  position: relative;
}

.footer-article {
  padding: 55px 0px 20px 0px;
}

.footer-news {
  margin-bottom: 30px;
}

.footer-news .bando:hover img {
  filter: invert(60%) sepia(93%) saturate(6477%);
}

.footer-title {
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
  color: #01b0f0;
  text-transform: uppercase;
  position: relative;
}

.footer-name {
  font-size: 17px;
  color: #8ba7c0;
  margin-bottom: 15px;
}

.footer-info {
  color: #000;
}

.footer-ul {
  list-style: outside;
  padding-left: 15px;
  margin: 0px;
}

.footer-ul li {
  margin-bottom: 10px;
}

.footer-ul li:last-child {
  margin-bottom: 0px;
}

.footer-ul li a {
  color: var(--color-footer);
  font-size: 14px;
}

.footer-ul li a:hover {
  text-decoration: none;
  color: #f37017;
}

.footer-powered {
  text-align: center;
  color: var(--color-footer);
  padding: 30px 0px;
  font-size: 14px;
  border-top: 1px solid #3f79b0;
  font-weight: 500;
}

.footer-copyright {
  text-align: left;
  display: inline-block;
  font-size: 14px;
  color: #fff;
}

.footer-copyright a {
  color: var(--color-footer);
}

.footer-statistic {
  display: inline-block;
  text-align: right;
  font-size: 14px;
}

.footer-statistic span {
  padding-right: 10px;
  border-right: 1px solid #3f79b0;
  margin-right: 10px;
  color: #3f79b0;
}

.footer-statistic span span {
  color: #fff;
}

.footer-statistic span:last-child {
  padding-right: 0px;
  margin-right: 0px;
  border-right: none;
}

/* Like Share */
.social-plugin {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.social-plugin .at-share-btn {
  margin-bottom: 0px !important;
}

.social-plugin .zalo-share-button {
  margin-left: 3px;
}

/* Paging */
.pagination-home .pagination .page-item .page-link {
  color: #555555;
  font-size: 0.875rem;
}

.pagination-home .pagination .page-item.active .page-link {
  color: #ffffff;
  background-color: #555555;
  border-color: #555555;
}

/* Paging Ajax */
.pagination-ajax {
  padding-bottom: 20px;
  text-align: center;
}

.pagination-ajax a {
  display: inline-block;
  vertical-align: top;
  margin: 0px 3px 3px 3px;
  width: 35px;
  height: 35px;
  line-height: 33px;
  color: #666 !important;
  border: 1px solid #e6e6e6;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none !important;
  background-color: #ffffff;
  border-radius: 50%;
}

.pagination-ajax a.current,
.pagination-ajax a:hover {
  color: #ffffff !important;
  border-color: var(--color-main);
  background-color: var(--color-main);
}

.pagination-ajax a.first,
.pagination-ajax a.last,
.pagination-ajax a.prev,
.pagination-ajax a.next {
  text-indent: -9999px;
  position: relative;
  background-color: #ffffff !important;
}

.pagination-ajax a.first:before,
.pagination-ajax a.last:before,
.pagination-ajax a.prev:before,
.pagination-ajax a.next:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

.pagination-ajax a.first:before {
  background-image: url(../images/page-first.png);
}

.pagination-ajax a.last:before {
  background-image: url(../images/page-last.png);
}

.pagination-ajax a.prev:before {
  background-image: url(../images/page-prev.png);
}

.pagination-ajax a.next:before {
  background-image: url(../images/page-next.png);
}

/* Popup */
#popup .modal-body {
  padding: 0px;
}

/* Hidden Google Captcha */
.grecaptcha-badge {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  visibility: hidden !important;
  overflow: hidden;
}

/* Hidden Check Grammar Coccoc */
coccocgrammar {
  display: none;
}

/* Scroll Top */
.scrollToTop {
  width: 41px;
  height: 41px;
  text-align: center;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position: fixed;
  bottom: 65px;
  right: 25px;
  display: none;
  z-index: 10;
  cursor: pointer;
}

/* Text Hide */
.text-split1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}

.text-split2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

.text-split3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
}

.text-split4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}

.text-split5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 5;
}

.text-split6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 6;
}

.text-split7 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 7;
}

.text-split8 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 8;
}

/* Transition All */
.transition {
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

/* Button Frame */
.btn-frame {
  display: block;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  z-index: 10;
  cursor: pointer;
}

.btn-frame i {
  display: flex;
  display: -ms-flex;
  justify-content: center;
  align-items: center;
  -ms-flex-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-main);
  position: relative;
  z-index: 1;
}

.btn-frame i img {
  vertical-align: middle;
  width: 70%;
}

.btn-frame .animated.infinite {
  animation-iteration-count: infinite;
}

.btn-frame .kenit-alo-circle {
  width: 60px;
  height: 60px;
  top: -5px;
  right: -5px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid var(--color-main);
  opacity: 0.1;
  border-color: var(--color-main);
  opacity: 0.5;
}

.btn-frame .zoomIn {
  animation-name: zoomIn;
}

.btn-frame .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.btn-frame .kenit-alo-circle-fill {
  width: 70px;
  height: 70px;
  top: -10px;
  right: -10px;
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background-color: rgba(7, 41, 103, 0.35);
  opacity: 0.4;
}

.btn-frame .pulse {
  animation-name: pulse;
}

/* Zalo */
.btn-map i {
  color: #fff;
  font-size: 25px;
}

.btn-map {
  bottom: 395px;
}

.btn-zalo {
  bottom: 315px;
}

.btn-phone {
  bottom: 230px;
}

.btn-phone span {
  background: #1182fc;
  position: absolute;
  top: 6px;
  right: 0;
  min-width: 185px;
  padding: 6px 45px 5px 10px;
  display: inline-flex;
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

/* Messenger */
.js-facebook-messenger-container.closed,
.js-facebook-messenger-tooltip.closed {
  display: none !important;
}

.js-facebook-messenger-tooltip {
  bottom: 97px;
  right: 97px;
}

.js-facebook-messenger-tooltip {
  color: #404040;
  background: #fff;
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
  z-index: 999;
}

.js-facebook-messenger-tooltip {
  display: none;
  position: fixed;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;
  z-index: 1e30;
}

.js-facebook-messenger-close-tooltip {
  width: 10px;
  height: 10px;
  display: inline-block;
  cursor: pointer;
  margin-left: 10px;
}

.js-facebook-messenger-box.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

.js-facebook-messenger-box.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
  z-index: 999;
}

.js-facebook-messenger-box {
  display: block;
  position: fixed;
  cursor: pointer;
  bottom: 150px;
  right: 17px;
  width: 56px;
  height: 56px;
  text-align: center;
  background: var(--color-main);
  border-radius: 100%;
  overflow: hidden;
  z-index: 99;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
}

.js-facebook-messenger-box.rotate svg#fb-msng-icon {
  transform: rotate(0deg);
}

.js-facebook-messenger-box svg#fb-msng-icon {
  width: 32px;
  height: 33px;
  position: absolute;
  top: 13px;
  left: 12px;
  opacity: 1;
  overflow: hidden;
  -webkit-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  -moz-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  -o-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
}

.js-facebook-messenger-box.rotate svg#close-icon {
  transform: rotate(-45deg);
}

.js-facebook-messenger-box svg#close-icon {
  opacity: 0;
  width: 19px;
  height: 20px;
  position: absolute;
  top: 19px;
  left: 19px;
  -webkit-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  -moz-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  -o-transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
  transition:
    opacity 160ms ease-in-out,
    transform 160ms ease-in-out;
}

.js-facebook-messenger-container,
.js-facebook-messenger-container-button {
  z-index: 1000;
}

.js-facebook-messenger-container {
  position: fixed;
  opacity: 0;
  transform: translateY(50px);
  bottom: 110px;
  right: 90px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow:
    0 1px 6px rgba(0, 0, 0, 0.06),
    0 2px 32px rgba(0, 0, 0, 0.16);
  -webkit-transition:
    transform 160ms ease-in-out,
    opacity 160ms ease-in-out;
  -moz-transition:
    transform 160ms ease-in-out,
    opacity 160ms ease-in-out;
  -o-transition:
    transform 160ms ease-in-out,
    opacity 160ms ease-in-out;
  transition:
    transform 160ms ease-in-out,
    opacity 160ms ease-in-out;
}

.js-facebook-messenger-top-header {
  width: 220px;
}

.js-facebook-messenger-top-header {
  color: #ffffff;
  background: #1182fc;
}

.js-facebook-messenger-top-header {
  display: block;
  position: relative;
  width: 220px;
  background: #1182fc;
  color: #ffffff;
  text-align: center;
  line-height: 1;
  padding: 10px;
  font-size: 14px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.js-facebook-messenger-container iframe,
.js-facebook-messenger-container-button iframe {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.js-facebook-messenger-box,
.js-facebook-messenger-button,
.js-facebook-messenger-tooltip {
  z-index: 999;
}

.js-facebook-messenger-container,
.js-facebook-messenger-container-button {
  z-index: 1000;
}

.js-facebook-messenger-top-header {
  color: #ffffff;
  background: #1182fc;
}

.js-facebook-messenger-top-header {
  width: 220px;
}

.js-facebook-messenger-tooltip {
  color: #404040;
  background: #fff;
}

.js-facebook-messenger-container.open {
  transform: translateY(0px);
  opacity: 1;
  pointer-events: all;
}

.js-facebook-messenger-tooltip {
  bottom: 97px;
  right: 97px;
}

.js-facebook-messenger-box.open svg#fb-msng-icon {
  opacity: 0;
}

.js-facebook-messenger-box.rotate.open svg#close-icon {
  transform: rotate(0deg);
}

.js-facebook-messenger-box.open svg#close-icon {
  opacity: 1;
}

/* Cart Fix */
.cart-fixed {
  position: fixed;
  right: 20px;
  bottom: 475px;
  z-index: 10;
  background: var(--color-main);
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-fixed i {
  font-size: 20px;
}

.cart-fixed span {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f37017;
  color: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
  border-radius: 100%;
}

/* Toolbar */
.toolbar {
  background: var(--color-main);
  width: 100%;
  padding: 3vw;
  bottom: 0px;
  position: fixed;
  z-index: 500;
  height: auto;
  left: 0px;
}

.toolbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  margin: 0px;
}

.toolbar ul li {
  text-align: center;
  width: 25%;
}

.toolbar ul li a {
  display: block;
  width: 100%;
  cursor: pointer;
}

.toolbar ul li a img {
  height: 6vw;
  width: auto;
}

.toolbar ul li a span {
  font-weight: 400;
  color: #ffffff;
  font-size: 3.5vw;
  display: none;
}

/* Fixbar */
.fixbar {
  bottom: 0;
  display: block;
  background: #f0eff4;
  border-top: 1px solid #ddd;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  margin: 0;
  z-index: 500;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 50px;
}

.fixbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.fixbar ul li {
  display: inline-block;
  margin: 0 auto 10px;
  text-align: center;
  width: 25%;
  float: left;
}

.fixbar .icon-cart-mobile,
.fixbar .icon-cart-new,
.fixbar .icon-home-new,
.fixbar .icon-hotdeal-new {
  width: 20px;
  height: 20px;
  display: block;
  margin: 8px auto 0;
}

.fixbar .icon-cart-mobile {
  background: url(../images/cart-mobile.png) no-repeat;
}

.cart-total-header-mobile {
  font-size: 10px;
  position: absolute;
  background: red;
  color: #fff !important;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  line-height: 15px;
  top: 5px;
  margin-left: 5px;
}

.fixbar ul li a {
  font-size: 11px;
  text-decoration: none;
  color: #333;
}

.fixbar ul li a i {
  font-size: 20px;
}

/* Plugbar */
.plugbar {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #eae6e6;
  width: 100%;
  right: 0;
  max-width: 767px;
  margin: 0 auto;
  background: #ffffff;
  padding: 9px 10px 10px 7px;
  z-index: 10;
}

.plugbar ul {
  list-style: none;
  padding: 0;
  margin: 0px;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plugbar ul li {
  width: 20%;
  float: left;
}

.plugbar ul li a {
  display: block;
  color: #696969;
  font-size: 12px;
  text-align: center;
  position: relative;
}

.plugbar ul li a i {
  font-size: 20px;
  color: #696969;
}

.plugbar ul li a span {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -40px;
  left: calc(50% - 50px / 2);
  font-size: 14px;
  display: block;
  border: 1px solid rgba(234, 230, 230, 0.5);
  border-radius: 100%;
}

/* Combo Phone */
.support-online {
  position: fixed;
  z-index: 999;
  left: 10px;
  bottom: 0px;
}

.support-online a {
  position: relative;
  margin: 20px 10px;
  text-align: left;
  width: 40px;
  height: 40px;
}

.support-online i {
  width: 40px;
  height: 40px;
  background: #43a1f3;
  color: #ffffff;
  border-radius: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 1.9;
  position: relative;
  z-index: 999;
}

.support-online a span {
  border-radius: 2px;
  text-align: center;
  background: rgb(103, 182, 52);
  padding: 9px;
  display: none;
  width: 180px;
  margin-left: 10px;
  position: absolute;
  color: #ffffff;
  z-index: 999;
  top: 0px;
  left: 40px;
  transition: all 0.2s ease-in-out 0s;
  -moz-animation: headerAnimation 0.7s 1;
  -webkit-animation: headerAnimation 0.7s 1;
  -o-animation: headerAnimation 0.7s 1;
  animation: headerAnimation 0.7s 1;
}

.support-online a:hover span {
  display: block;
}

.support-online a {
  display: block;
}

.support-online a span:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent rgb(103, 182, 52) transparent transparent;
  position: absolute;
  left: -10px;
  top: 10px;
}

.support-online .kenit-alo-circle-fill {
  width: 60px;
  height: 60px;
  top: -10px;
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  background-color: rgba(0, 175, 242, 0.5);
  opacity: 0.75;
  right: -10px;
}

.support-online .kenit-alo-circle {
  width: 50px;
  height: 50px;
  top: -5px;
  right: -5px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(30, 30, 30, 0.4);
  opacity: 0.1;
  border-color: #0089b9;
  opacity: 0.5;
}

.support-online .support-online .btn-support {
  cursor: pointer;
}

.support-online .mes i {
  background: orange;
}

.support-online .sms i {
  background: red;
}

.support-online .call-now i {
  background: green;
}

/* Phone Switch */
.widget-mobile {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 9999999;
}

#my-phone-circle {
  position: relative;
  width: 50px !important;
  height: 50px !important;
}

.wcircle-open .wcircle-icon i:before {
  content: "\f00d";
}

.wcircle-icon {
  background: #1282fc;
  border-radius: 50%;
  display: flex !important;
  display: -ms-flex !important;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative !important;
}

.wcircle-icon:before {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  background: rgba(18, 130, 252, 0.5);
  border: 1px solid #ffffff;
  border-radius: 50%;
  left: -5px;
  top: -5px;
  -webkit-animation: pulse 1s infinite ease-in-out;
  -moz-animation: pulse 1s infinite ease-in-out;
  -ms-animation: pulse 1s infinite ease-in-out;
  -o-animation: pulse 1s infinite ease-in-out;
  animation: pulse 1s infinite ease-in-out;
}

.wcircle-icon:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background: rgba(18, 130, 252, 0.5);
  border-radius: 50%;
  left: -15px;
  top: -15px;
  -webkit-animation: zoomIn 2s infinite ease-in-out;
  -moz-animation: zoomIn 2s infinite ease-in-out;
  -ms-animation: zoomIn 2s infinite ease-in-out;
  -o-animation: zoomIn 2s infinite ease-in-out;
  animation: zoomIn 2s infinite ease-in-out;
}

.wcircle-menu {
  position: absolute !important;
  left: 0;
  top: 0;
  display: none;
}

.wcircle-menu-item {
  width: 50px;
  height: 50px;
  background: #1282fc;
  border-radius: 50%;
  display: flex;
  display: -ms-flex;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.wcircle-menu-item img {
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 50%;
}

.wcircle-menu-item i,
.wcircle-icon i {
  font-size: 25px;
  color: #ffffff;
  position: relative;
  z-index: 9999;
}

/* tabs owl */
.ul-tabs-pro-detail {
  list-style: none;
  display: block;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  margin-top: -10px;
}

.ul-tabs-pro-detail li {
  font-size: 15px;
  color: #222222;
  cursor: pointer;
  display: inline-block;
  margin: 0px 4px 9px 4px;
  position: relative;
  background: #f0f0f0;
  border-radius: 5px;
  padding: 8px 25px;
  text-transform: uppercase;
  border: 1px solid #d8d8d8;
}

.ul-tabs-pro-detail li.active,
.ul-tabs-pro-detail li:hover {
  color: #fff;
  background: #bf1e2d;
}

.content-tabs-pro-detail {
  display: none;
  position: relative;
}

.content-tabs-pro-detail.active {
  display: block;
}

.content-tabs-pro-detail iframe {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0px !important;
  left: 0px !important;
}

.time-main {
  margin-bottom: 0.75rem;
  color: #999999;
}

.time-main i {
  vertical-align: top;
  margin: 3px 7px 0px 0px;
}

.time-main span {
  vertical-align: top;
  display: inline-block;
}

.share {
  padding: 17px 15px 10px 15px;
  line-height: normal;
  background: rgba(128, 128, 128, 0.15);
  margin-top: 15px;
  border-radius: 5px;
}

.share b {
  display: block;
  margin-bottom: 5px;
}

.control-owl {
  position: absolute;
  width: 100%;
  z-index: 2;
  left: 0px;
  top: calc(50% - 45px / 2);
}

.control-owl button {
  opacity: 0.5;
  top: 0px;
  position: absolute;
  outline: none;
  border: 0px;
  padding: 0px;
  margin: 0px;
  display: block;
  cursor: pointer;
  color: #ffffff;
  width: 45px;
  height: 45px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin: 0px;
  background-color: #000000;
  border-radius: 3px;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.control-owl button:hover {
  opacity: 1;
}

.control-owl button.owl-prev {
  left: 20px;
}

.control-owl button.owl-next {
  right: 20px;
}

.form-control,
.form-control-plaintext:not(textarea),
.custom-select {
  /* height:calc(1em + 1.25rem + 8px); */
}

.text-sm {
  font-size: 0.875rem !important;
}

/* footer map */
/* 1 map */
#footer-map {
  position: relative;
  height: 500px;
}

#footer-map iframe {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0px !important;
  left: 0px !important;
}

/* Maps */
.iframe_chinhanh iframe {
  width: 100%;
  height: 350px;
}

.block-chi-nhanh {
  position: relative;
}

.block-toa-do {
  position: absolute;
  top: 15px;
  left: 315px;
  display: flex;
  flex-wrap: wrap;
}

.item-toa-do.active,
.item-toa-do:hover {
  background: #d11111;
}

.ten-chi-nhanh {
  color: #fff;
  text-transform: capitalize;
  font-size: 20px;
}

.item-toa-do {
  background: #0016eb;
  margin: 0 20px 20px 0;
  padding: 5px 10px;
  cursor: pointer;
}

/* button owl */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--color-main);
}

/* owner */
/* menu*/
.box_translate {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.social_header,
.box_translate {
  background: #efefef;
  height: 43px;
}

.search_new_contact {
  background: #114e87;
}

.search_element {
  background: #efefef;
}

.logo a img {
  height: 77px;
}

.menu-res .logo a img {
  height: 40px;
}

.social_header ul.box_social a img {
  height: 17px;
}

.new_element a,
.contact_element a {
  color: #fff;
  padding: 11px 10px;
}

.new_element a:hover,
.contact_element a:hover {
  text-decoration: none;
  background: #073c6e;
}

.menu_right_bottom {
  padding: 30px 0;
}

.gioithieu_text_ab {
  position: absolute;
  top: 50%;
  z-index: 99;
  width: 44%;
  color: #fff;
  transform: translateY(-50%);
  left: calc((100% - 1200px) / 2);
}

.gioithieu_text_ab {
  pointer-events: none;
  position: absolute;
  z-index: 99;
  top: 50%;
  transform: translateY(-50%);
  max-width: 530px;
  left: calc((100% - 1200px) / 2);
  color: #fff;
}

.gioithieu_text_ab h3 {
  font-size: 38px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.gioithieu_text_ab span {
  font-size: 16px;
  line-height: 28px;
}

.timhieuthem {
  padding: 16px 0;
  color: #fff;
  background: #003366;
  position: relative;
  top: -10px;
}

.timhieuthem span {
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
  width: calc(100% - 200px);
}

.btn_timhieuthem {
  width: 200px;
  padding: 16px 0;
  background: #3e7ab3;
  border-radius: 30px;
  text-align: center;
}

.btn_timhieuthem a {
  color: #fff;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  vertical-align: text-top;
  text-transform: uppercase;
}

.btn_timhieuthem a:hover {
  text-decoration: none;
  color: #f37017;
}

.gioithieu_tinnoibat {
  padding: 50px 0 45px;
}

.box_video_static {
  max-width: 790px;
  cursor: pointer;
}

/* FIX: Ảnh giới thiệu bị tràn full màn hình do <img> không có
   max-width/height:auto => ảnh hiển thị đúng kích thước gốc (thường
   rất lớn), vượt ra ngoài cột col-md-8. Ép ảnh luôn co giãn theo
   chiều rộng khối cha .item-image / .box_video_static. */
.item-image {
  width: 100%;
}

.item-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.box_video_static h3 {
  font-size: 44px;
  font-family: "Montserrat", sans-serif;
  color: var(--color-main);
  margin-bottom: 30px;
}

.tintuc_noibat>h3 {
  font-size: 23px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.tintuc_noibat {
  padding: 75px 30px 0 50px;
  background-size: cover;
  height: 566px;
}

.box_tintucnoibat {
  max-height: 440px;
  overflow-y: auto;
}

.news_item h3 a {
  font-size: 16px;
  color: #000;
}

.news_item {
  margin-bottom: 20px;
  position: relative;
}

.news_item h3 {
  line-height: 18px;
  padding-left: 30px;
}

.circle_pointer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: #3e7ab3;
}

.box_tintucnoibat::-webkit-scrollbar {
  width: 5px;
  background: #ccc;
}

.box_tintucnoibat::-webkit-scrollbar-thumb {
  background: #969393;
  border-radius: 25px;
}

/* dich vu */
.dichvunb {
  padding: 45px 0;
}

.p0 {
  padding: 0;
}

.m0 {
  margin: 0;
}

.dichvu_item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* FIX: .dichvu_pic chưa từng được style => ảnh chỉ có width:100%;
   height:auto (từ .img100), mỗi ảnh gốc tỉ lệ khác nhau nên 3 cột
   cao thấp không đều, kéo theo nhãn tròn (dichvu_name_ab) bị lệch
   vị trí giữa các cột so với ảnh mẫu. Ép chiều cao cố định bằng
   nhau + object-fit: cover để ảnh luôn lấp đầy khung, không méo. */
.dichvu_pic {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.dichvu_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .dichvu_pic {
    height: 320px;
  }
}

@media (max-width: 575px) {
  .dichvu_pic {
    height: 260px;
  }
}

.dichvu_name_ab {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-width: 85%;
  border: 2px solid #fff;
  border-radius: 59px;
  text-align: center;
  padding: 15px;
  opacity: 1;
  transition: 0.5s;
  z-index: 2;
}

.dichvu_name_ab h3 {
  background: #093864;
  color: #fff;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  padding: 25px 10px;
  border-radius: 35px;
}

.dichvu_info_hover {
  opacity: 0;
  transition: 0.5s;
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.dichvu_info_hover h3 {
  margin: 20px 0;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.dichvu_info_hover h3 a {
  color: #000;
}

.btn_xemchitiet a {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  color: var(--color-main);
}

.btn_xemchitiet {
  padding-top: 20px;
}

.dichvu_item:hover .dichvu_info_hover {
  opacity: 1;
  transition: 0.5s;
}

.dichvu_item:hover .dichvu_name_ab {
  opacity: 0;
  transition: 0.5s;
}

/* product */
/* FIX: .product_pic chưa từng được style => ảnh chỉ có
   width:100%; height:auto (từ .img100), mỗi ảnh sản phẩm tỉ lệ
   khác nhau (máy móc ngang, quạt cây dọc, thảm ngang...) nên các
   khung ảnh cao thấp không đều. Ép chiều cao cố định bằng nhau,
   dùng object-fit: contain (không phải cover) để ảnh nằm gọn,
   không bị cắt mất chi tiết sản phẩm. */
.product_pic {
  position: relative;
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product_pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 991px) {
  .product_pic {
    height: 240px;
  }
}

@media (max-width: 575px) {
  .product_pic {
    height: 220px;
  }
}

.element_count span {
  font-size: 46px;
  font-family: monbo;
  color: #fff;
  -webkit-text-stroke: 1px var(--color-main);
}

.product_name {
  padding-left: 10px;
  position: relative;
  padding-bottom: 10px;
}

.product_name h3 {
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.product_name h3 a {
  color: #131313;
}

.product_name:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 50px;
  height: 2px;
  background: var(--color-main);
}

.product_item {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 25px;
  margin-bottom: 30px;
}

.sanphamnoibat {
  padding: 45px 0;
}

/* gia tri */
.giatri_index {
  padding: 100px 0;
  background-size: cover;
}

.giatri_info {
  padding-left: 10px;
  width: calc(100% - 128px);
}

.giatri_info h3 {
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.giatri_pic {
  border: 2px solid #adceed;
  border-radius: 50%;
  width: 128px;
  height: 128px;
}

.giatri_pic.scale-img img {
  width: 100%;
  height: auto;
}

.giatri_pic img {
  border-radius: 50%;
}

/* hoat dong */
.hoatdong_form {
  padding: 100px 0;
  background-size: cover;
}

.title_hoatdong h2 {
  font-size: 34px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding-bottom: 25px;
}

.hoatdong_item {
  margin-bottom: 25px;
  height: 105px;
}

.hoatdong_info {
  color: #fff;
  padding-left: 15px;
}

.hoatdong_info h3 {
  font-size: 22px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hoatdong_pic {
  padding: 26px;
  border: 1px solid #fff;
  border-radius: 50%;
}

/* form */
.p5 {
  padding: 0 5px;
}

.m5 {
  margin: 0 -5px;
}

.title_form {
  color: #fff;
  margin-bottom: 30px;
  text-align: center;
}

.title_form h2 {
  margin-bottom: 10px;
  font-size: 34px;
  font-family: "Montserrat", sans-serif;
}

/* doi tac */
.p25 {
  padding: 0 25px;
}

.m25 {
  margin: 0 -25px;
}

.doitac {
  padding: 90px 0 60px;
}

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

.box_doitac_text h3 {
  font-size: 44px;
  font-family: "Montserrat", sans-serif;
  color: var(--color-main);
  margin-bottom: 35px;
}

.box_doitac_text {
  margin-bottom: 20px;
  text-align: center;
}

.btn_xemthemdoita {
  padding-top: 60px;
}

.btn_xemthemdoita a {
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  border: 1px solid var(--color-main);
  padding: 17px 39px;
  border-radius: 45px;
  color: var(--color-main);
  text-decoration: none;
}

/* footer */
.footer h3 {
  padding-top: 20px;
  font-size: 44px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-transform: capitalize;
}

.footer:after {
  content: "";
  position: absolute;
  width: 467px;
  height: 50px;
  top: -50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../images/desc_footer.png) no-repeat;
  background-size: 100% 100%;
  display: none;
}

.file_name h3 a {
  font-size: 19px;
  font-family: "monre";
  color: #000;
  text-transform: capitalize;
}

.file_download a,
.file_seedetail a {
  color: var(--color-main);
}

.tailieu_item {
  margin-bottom: 5px;
  padding: 0 15px;
}

.tailieu_item:nth-child(even) {
  background: #edebeb;
  border-radius: 5px;
}

.search_element .search-res .icon-search {
  color: #114e87;
}

.col-2.file_size,
.file_download {
  font-size: 16px;
}

.slideshow {}

.pic_news {
  position: relative;
}

.inner {
  position: absolute;
  bottom: 0;
}

.flipper-back .inner {
  padding: 0 10px;
}

h2.title_baivietlienquan {
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  padding: 10px 20px 10px 10px;
  margin-top: 20px;
  background: #f4f4f4;
}

ul.baivietlienquan li a {
  font-size: 16px;
  color: #000;
  text-transform: capitalize;
}

.menu_scroll {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  opacity: 0;
  transition: 0.5s;
  background: #fff;
}

.menu_scroll.scrolling {
  display: block;
  opacity: 1;
  transition: 0.5s;
}

.hinh-dichvu {
  position: relative;
  padding: 6px;
}

.hinh-dichvu a {
  display: block;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hinh-dichvu:after {
  content: "";
  position: absolute;
  background: #f37017;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: -1;
}

.doitac_col {
  display: flex;
  justify-content: center;
}

.doitac_item {
  text-align: center;
  margin: 0 auto 30px;
  padding: 24px;
  width: 190px;
  height: 190px;
  box-sizing: border-box;
}

.doitac_item_inside {
  transform: rotate(45deg);
  border: 1px solid #ccc;
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doitac_reverse {
  transform: rotate(-45deg);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doitac_reverse .scale-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doitac_reverse .scale-img img.img100 {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 767px) {
  .doitac_item {
    width: 140px;
    height: 140px;
    padding: 16px;
  }

  .doitac_item_inside {
    padding: 14px;
  }
}

.doitac_reverse {
  transform: rotate(-45deg);
}

.slideshow-item iframe {
  height: 530px;
}

.menu_right {
  flex: 0 0 calc(100% - 300px);
  -ms-flex: 0 0 calc(100% - 300px);
  max-width: calc(100% - 300px);
}

.menu_left {
  flex: 0 0 100px;
  -ms-flex: 0 0 100px;
  max-width: 100px;
}

.name_list {
  font-family: "Montserrat", sans-serif;
}

.menu ul li ul::-webkit-scrollbar {
  width: 2px;
  background: #ccc;
}

.menu ul li ul::-webkit-scrollbar-thumb {
  background: #969393;
}

.box_lienlac {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--color-main);
}

.item_mail,
.item_hotline {
  margin-bottom: 5px;
  font-size: 15px;
  color: var(--color-main);
}

.item_mail i,
.item_hotline i {
  padding-right: 10px;
}

.btn_goto_contact {
  margin-top: 20px;
  background: var(--color-main);
  padding: 5px 0;
  text-align: center;
  border-radius: 5px;
}

.btn_goto_contact a {
  color: #fff;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.btn_goto_contact a:hover {
  color: #f37017;
  text-decoration: none;
}

ul.baivietlienquan {
  /* margin-left: 20px; */
  background: #f4f4f4;
  padding-bottom: 10px;
}

ul.baivietlienquan h3 {
  line-height: 20px;
}

ul.baivietlienquan li {
  margin-left: 30px;
}

ul.flex_none {
  /* display: unset !important; */
  height: auto;
  width: 250px !important;
}

.box_sanphamcungloai label {
  font-size: 22px;
  font-family: monbo;
  text-transform: uppercase;
}

ul.sanphamcungloai {
  margin-left: 18px;
}

ul.sanphamcungloai li h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

ul.sanphamcungloai li h3 a {
  color: #000;
}

ul.sanphamcungloai li h3 a:hover {
  color: #f37017 text-decoration: none;
}

.box_download a {
  background: var(--color-main);
  padding: 11px 41px;
  color: #fff;
  border-radius: 5px;
}

.indam_bold strong {
  font-family: monbo;
  text-transform: uppercase;
}

.box_download p {
  margin-bottom: 15px;
  font-size: 16px;
  font-family: monme;
}

div#toc-content {
  /* margin-top: 30px; */
}

.img_maxwidith100 img {
  max-width: 100%;
  height: auto !important;
}

.box_sticky {
  position: sticky;
  top: 65px;
}

.meta-toc.congty_tpl {
  position: sticky;
  top: 85px;
  background: #eeeeee;
  z-index: 99;
}

.new_element {
  padding: 11px 0;
}

/* Toc */
.box-readmore {
  padding: 8px 15px;
  border: 1px solid #dedede;
  margin-bottom: 2rem;
  border-radius: 5px;
  background-color: #eeeeee;
}

.box-readmore li ul>li {
  margin: 0;
  margin-bottom: 8px;
}

.box-readmore ul {
  list-style-type: none;
  counter-reset: item;
  margin-bottom: 0px;
  padding-left: 0px !important;
  margin-top: 8px;
}

.box-readmore ul li {
  display: table;
  counter-increment: item;
  margin-bottom: 5px;
}

.box-readmore ul li a {
  color: #333333;
  cursor: pointer;
  font-weight: 600;
}

.box-readmore ul li a:hover {
  color: #767676 !important;
}

.noidung.w-clear.mota_sanpham {
  padding-bottom: 30px;
}

/* Responsive */
@media (max-width: 991px) {

  .menu_left .logo,
  .menu_left {
    display: none !important;
  }

  .menu_scroll {
    display: none !important;
  }

  .menu-res {
    display: block;
  }

  .hotline-header,
  .search_element,
  .search,
  .btn-zalo,
  .btn-phone,
  .btn-messages,
  .btn-map {
    display: none;
  }

  .menu_right {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%;
  }

  .menu_right_bottom {
    display: none !important;
    margin-top: 20px;
  }

  .menu .d-flex {
    justify-content: center !important;
  }

  .menu {
    padding: 10px 0;
  }

  .timhieuthem span {
    width: 100% !important;
  }

  .timhieuthem .d-flex {
    justify-content: center !important;
  }

  .gioithieu_tinnoibat .col-lg-8 {
    text-align: -webkit-center;
  }

  .meta-toc.congty_tpl {
    top: 55px;
  }
}

@media (max-width: 768px) {
  .content-main .col-md-9 {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-copyright,
  .footer-statistic {
    text-align: center;
  }

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

  .padding_main {
    padding: 30px 0;
  }

  .gioithieu_tinnoibat,
  .doitac {
    padding: 30px 0 15px;
  }

  .footer:after {
    display: none;
  }

  .title-main h2 {
    font-size: 30px;
  }
}

@media (max-width: 840px) {
  .giaiphap_ab {
    display: none;
  }

  .gioithieu_text_ab {
    max-width: initial;
    width: 100%;
    padding: 0 20px;
  }

  ul.box_social li a {
    padding: 0 4px;
  }
}

@media (max-width: 369px) {
  .cart-pro-detail a {
    width: 100%;
  }

  .cart-pro-detail a:first-child {
    margin-right: 0px;
    margin-bottom: 0.5rem;
  }

  .cart-pro-detail a i {
    display: none;
  }
}

@media (max-width: 460px) {
  .block-toa-do {
    left: 0;
    top: 150px;
  }
}

@media (max-width: 1250px) {
  .menu_right_bottom ul li a {
    padding: 0 1.5px;
  }

  .gioithieu_text_ab h3 {
    font-size: 20px;
  }

  .gioithieu_text_ab {
    left: 15px;
  }
}

@media (max-width: 786px) {
  .slideshow-item iframe {
    height: 350px;
  }
}

@media (max-width: 1042px) {
  .slideshow-item iframe {
    height: 442px;
  }
}

@media (max-width: 600px) {
  .slideshow-item iframe {
    height: 255px;
  }
}

@media (max-width: 414px) {
  .slideshow-item iframe {
    height: 175px;
  }
}

.desc-pro-detail br {
  display: none;
}

a.pointer-event-none {
  pointer-events: none;
}

li.nav-item a {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.item_file_attach {
  font-size: 17px;
  margin-bottom: 5px;
  padding: 5px;
}

.item_file_attach:nth-child(even) {
  background: #edebeb;
  border-radius: 5px;
}

ul.baivietlienquan li::marker {
  color: var(--color-main);
}

/* ======================================================================
   MODERN HEADER + IMAGE SLIDER THEME (Tien Hung / THUCO)
   Bổ sung phía sau để ghi đè an toàn lên các rule màu cũ của header/slider.
   Không đổi biến --color-main / --color-red toàn cục để tránh ảnh hưởng
   các khối khác của site (chỉ nhắm đúng vùng header + slideshow).
====================================================================== */

:root {
  --th-navy: #0a3d62;
  --th-navy-deep: #072844;
  --th-teal: #f37017;
  --th-teal-light: #4fe0d2;
  --th-amber: #ffb800;
  --th-ink: #1d2939;
}

/* ---------------- HEADER ---------------- */
.menu {
  background: #ffffff;
  box-shadow: 0 4px 22px rgba(10, 61, 98, 0.08);
  border-bottom: 3px solid var(--th-teal);
}

.social_header,
.box_translate {
  background: #f2f6f8;
  border-radius: 6px;
}

.box_translate {
  border-left: 1px solid #e1e8ec;
  border-right: 1px solid #e1e8ec;
}

.search_new_contact {
  background: linear-gradient(135deg,
      var(--th-navy) 0%,
      var(--th-navy-deep) 100%);
  border-radius: 6px;
  overflow: hidden;
  /* cần giữ để bo góc nền/hover của Tin tức|Liên hệ, xem fix bên dưới cho ô search */
}

/* ======================================================================
   FIX: Ô TÌM KIẾM VẪN "MỞ" (width/opacity đổi đúng) NHƯNG KHÔNG THẤY GÌ
   Nguyên nhân thật sự: .search_new_contact (khối cha bao icon search +
   nút Tin tức/Liên hệ) có "overflow:hidden" để bo góc nền gradient +
   bo góc hover của 2 nút bên cạnh. Nhưng .search-grid lại nằm bên
   trong khối này và được định vị "position:absolute" để xổ xuống dưới
   -> bị chính overflow:hidden của cha cắt mất, dù CSS active vẫn chạy
   đúng (width/opacity đổi) nên không hề thấy hộp tìm kiếm hiện ra.
   Không thể bỏ hẳn overflow:hidden (sẽ vỡ bo góc 2 nút), nên chỉ mở
   overflow ra tạm thời đúng lúc ô search đang active (JS gắn thêm class
   "search-active-open" cho .search_new_contact khi mở/đóng).
====================================================================== */
.search_new_contact.search-active-open {
  overflow: visible;
}

.new_element a,
.contact_element a {
  color: #ffffff;
}

.new_element a:hover,
.contact_element a:hover {
  background: var(--th-teal);
}

.search_element {
  background: #f2f6f8;
}

.search_element .search-res .icon-search {
  color: var(--th-navy);
}

.search-res .search-grid {
  border-color: var(--th-teal);
}

.menu ul.menu-parent>li>a {
  color: var(--th-ink);
  font-weight: 600;
  position: relative;
}

.menu ul.menu-parent>li a.active,
.menu ul.menu-parent>li:hover>a {
  color: var(--th-teal);
}

.menu ul.menu-parent>li>a:after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  background: var(--th-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.menu ul.menu-parent>li:hover>a:after {
  transform: scaleX(1);
}

.menu ul li ul {
  background-color: #ffffff;
  box-shadow: 0 12px 30px rgba(10, 61, 98, 0.14);
  border-top: 2px solid var(--th-teal);
}

.menu ul li ul li a.active,
.menu ul li ul li>a:hover {
  color: var(--th-teal) !important;
}

/* ---------------- HERO IMAGE SLIDER ---------------- */
.slideshow {
  position: relative;
}

.box_slide_img {
  position: relative;
  overflow: hidden;
}

.box_slide_img:before {
  content: "";
  display: block;
  padding-top: 46.5%;
}

.box_slide_img img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box_slide_img:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(7, 40, 68, 0.78) 0%,
      rgba(7, 40, 68, 0.35) 45%,
      rgba(7, 40, 68, 0.05) 75%);
  z-index: 1;
}

.slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #fff;
}

.slide-caption .maxwidth {
  max-width: 1230px;
}

.slide-tag {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--th-navy-deep);
  background: var(--th-amber);
  border-radius: 30px;
  text-transform: uppercase;
}

.slide-caption h2 {
  font-family: "monsemi", sans-serif;
  font-size: 44px;
  line-height: 1.2;
  max-width: 620px;
  margin-bottom: 18px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.slide-caption p {
  font-size: 17px;
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 28px;
  color: #e7eef3;
}

.slide-btn {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--th-teal) 0%, var(--th-navy) 100%);
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 30px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  text-decoration: none !important;
}

.slide-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 184, 169, 0.5);
  color: #fff;
}

/* owl nav / dots for the hero slider */
.slideshow .owl-nav .owl-prev,
.slideshow .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: 3;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.slideshow .owl-nav .owl-prev {
  left: 30px;
}

.slideshow .owl-nav .owl-next {
  right: 30px;
}

.slideshow .owl-nav .owl-prev:hover,
.slideshow .owl-nav .owl-next:hover {
  background: var(--th-teal);
  border-color: var(--th-teal);
}

.slideshow .owl-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
}

.slideshow .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.55);
  width: 10px;
  height: 10px;
  margin: 0 5px;
  display: inline-block;
  border-radius: 50%;
  transition:
    background 0.25s ease,
    width 0.25s ease;
}

.slideshow .owl-dots .owl-dot.active span,
.slideshow .owl-dots .owl-dot:hover span {
  background: var(--th-amber);
  width: 26px;
  border-radius: 6px;
}

/* CTA strip under hero */
.timhieuthem {
  background: linear-gradient(135deg,
      var(--th-navy) 0%,
      var(--th-navy-deep) 100%);
}

.btn_timhieuthem {
  background: var(--th-teal);
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(0, 184, 169, 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn_timhieuthem:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 184, 169, 0.45);
}

.btn_timhieuthem a:hover {
  color: var(--th-navy-deep) !important;
}

@media (max-width: 767px) {
  .slide-caption h2 {
    font-size: 26px;
  }

  .slide-caption p {
    font-size: 14px;
  }

  .box_slide_img:before {
    padding-top: 90%;
  }

  .slideshow .owl-nav .owl-prev,
  .slideshow .owl-nav .owl-next {
    width: 36px;
    height: 36px;
  }
}

/* ======================================================================
   FIX: HEADER FIX (STICKY) KHI CUỘN TRANG + MEGA-DROPDOWN BỊ LỆCH/TRÀN
   Nguyên nhân: dropdown menu định vị "left:0" theo .menu, nhưng .menu ở
   header gốc và header sticky nằm trong 2 ngữ cảnh container khác nhau
   (full-width vs. bọc trong .maxwidth) => dropdown bị lệch, tràn ra ngoài
   màn hình khi header chuyển sang fixed lúc cuộn. Fix: luôn tự canh giữa
   + giới hạn không vượt quá viewport, dùng chung cho cả 2 header.
====================================================================== */

.menu ul li ul {
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1200px;
  max-width: calc(100vw - 30px);
  z-index: 50;
}

.menu ul li ul li {
  max-width: 100%;
}

/* ---------------- HEADER FIX (STICKY) KHI CUỘN ---------------- */
.menu_scroll {
  z-index: 9999;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 8px 24px rgba(10, 61, 98, 0.12);
  transition:
    opacity 0.35s ease,
    box-shadow 0.35s ease;
}

.menu_scroll .menu {
  box-shadow: none;
  border-bottom: none;
}

.menu_scroll .maxwidth {
  padding-top: 8px;
  padding-bottom: 8px;
}

.menu_scroll .logo-header img {
  height: 44px;
  width: auto;
  transition: height 0.3s ease;
}

.menu_scroll ul.menu-parent>li>a {
  line-height: 30px;
  font-size: 15px;
}

.menu_scroll:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--th-teal, #f37017);
}

@media (max-width: 991px) {
  .menu ul li ul {
    width: calc(100vw - 20px);
  }
}

/* ======================================================================
   FIX: LOGO BỊ MENU ĐÈ LÊN + KHOẢNG CÁCH MENU KHÔNG PHÙ HỢP
   Nguyên nhân:
   1) .menu_left đang set cứng "flex: 0 0 100px; max-width:100px" nhưng
      logo thực tế rộng hơn 100px => logo bị tràn ra ngoài và menu bên
      phải đè chồng lên logo.
   2) .menu-parent dùng class bootstrap "justify-content-between" nên các
      mục menu bị kéo dãn đều ra hết chiều rộng, tạo khoảng cách không
      đều/không hợp lý giữa các mục.
   Fix: cho menu_left tự co giãn theo đúng kích thước logo, menu_right
   chiếm phần còn lại, và các mục menu gom nhóm về bên phải với khoảng
   cách đều nhau (giống bố cục ảnh mẫu).
====================================================================== */

.menu_left {
  flex: 0 0 auto;
  max-width: none;
  margin-right: 25px;
  display: flex;
  align-items: center;
}

.menu_left .logo,
.menu_left .logo a {
  display: inline-block;
}

.logo a img {
  height: 60px;
  width: auto;
  max-width: none;
}

.menu_right {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.menu ul.menu-parent>li {
  flex: 0 0 auto;
}

.menu ul.menu-parent>li>a {
  padding: 0 18px;
  line-height: 44px;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .menu ul.menu-parent>li>a {
    padding: 0 12px;
    font-size: 15px;
  }
}

.menu.scroll_menu .maxwidth,
.menu .maxwidth {
  display: flex;
}

.menu.scroll_menu {
  padding-left: 0;
  padding-right: 0;
}

.menu.scroll_menu .maxwidth {
  padding-left: 15px;
  padding-right: 15px;
  max-width: 1230px;
}

.search-res {
  overflow: visible;
}

/* Khung dropdown pill khi mở */
.search-res .search-grid {
  right: 0;
  width: 0;
  height: 44px;
  background: #ffffff;
  border: 1px solid var(--th-teal, var(--color-main));
  border-radius: 30px;
  box-shadow: 0 12px 28px rgba(10, 61, 98, 0.18);
  transition:
    width 0.25s ease,
    opacity 0.2s ease;
  z-index: 20;
}

.search-res .icon-search.active+.search-grid,
.search-res.active .search-grid {
  width: 280px;
  opacity: 1;
}

/* Icon kính lúp bên trong ô input (nút submit) */
.search-res .search-grid p {
  width: 44px;
  height: 42px;
  line-height: 44px;
  color: var(--th-teal, var(--color-main));
  font-size: 16px;
}

.search-res .search-grid input {
  width: calc(100% - 44px);
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}

/* Icon toggle: kính lúp -> dấu X khi active */
.search-res .icon-search {
  position: relative;
}

.search-res .icon-search i.fa-search {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.search-res .icon-search.active i.fa-search {
  opacity: 0;
  transform: scale(0.5);
}

.search-res .icon-search.active {
  background: transparent;
}

.search-res .icon-search.active::before,
.search-res .icon-search.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--th-navy, var(--color-main));
  border-radius: 2px;
}

.search-res .icon-search.active::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-res .icon-search.active::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ======================================================================
   FIX 2: MENU MOBILE OFF-CANVAS
   CSS gốc chỉ có "#menu{display:none;}" và ".mm-menu_opened{display:block
   !important;}" — nghĩa là khi mở, #menu chỉ chuyển sang hiển thị NGAY
   TRONG DÒNG CHẢY trang (không phải dạng trượt/overlay), không có định
   vị fixed, không có lớp phủ (backdrop), không có style cho từng mục.
   Bổ sung toàn bộ phần dưới đây để menu mobile hiển thị dạng panel
   trượt từ trái, có lớp phủ tối, đúng như ảnh mẫu.
====================================================================== */

#menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 82vw;
  height: 100%;
  background: #ffffff;
  z-index: 10001;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.25);
}

.mm-menu_opened {
  display: block !important;
  transform: translateX(0) !important;
}

.mm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 40, 68, 0.55);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mm-backdrop.active {
  display: block;
  opacity: 1;
}

body.mm-wrapper_opening {
  overflow: hidden;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px;
  background: #f5f6f8;
  border-bottom: 1px solid #e5e8eb;
  font-size: 15px;
  color: #8a8f98;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-menu-close {
  position: absolute;
  right: 8px;
  top: 0;
  width: 42px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  color: var(--th-navy, var(--color-main));
  cursor: pointer;
}

#menu>ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu ul li {
  position: relative;
  border-bottom: 1px solid #edeff1;
}

#menu ul li a {
  display: block;
  padding: 13px 18px;
  font-size: 15px;
  color: var(--th-ink, #1d2939);
  text-decoration: none !important;
  text-transform: capitalize;
}

#menu ul li.has-children>a {
  padding-right: 40px;
}

#menu ul li.has-children>a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #9aa1a9;
  border-bottom: 2px solid #9aa1a9;
  transform: translateY(-70%) rotate(-45deg);
  transition: transform 0.2s ease;
}

#menu ul li.has-children.submenu-open>a::after {
  transform: translateY(-30%) rotate(45deg);
}

#menu ul li.active>a {
  color: var(--th-teal, var(--color-red));
  font-weight: 600;
}

/* menu con: ẩn mặc định, JS slideDown/slideUp khi mở */
#menu ul li ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fafbfc;
}

#menu ul li ul li {
  border-bottom: 1px solid #eef0f2;
}

#menu ul li ul li a {
  padding-left: 32px;
  font-size: 14px;
  color: #4b5563;
}

#menu ul li ul li ul li a {
  padding-left: 46px;
  font-size: 13.5px;
  color: #6b7280;
}

@media (min-width: 992px) {

  #menu,
  .mm-backdrop {
    display: none !important;
  }
}