/* Hiển thị theo ngôn ngữ: thêm language-vi | language-en | language-zh vào custom class của element */
/* html có class language-* chỉ để đánh dấu ngôn ngữ hiện tại, không ẩn html */
:not(html).language-vi,
:not(html).language-en,
:not(html).language-zh {
  display: none;
}
html.language-vi .language-vi,
html.language-en .language-en,
html.language-zh .language-zh {
  display: revert;
}

.client-lang-switch {
  position: relative;
  font-weight: 600;
}

.client-lang-switch select {
  display: none;
}

.lang-nice {
  position: relative;
  cursor: pointer;
  background-image: url(./bg-select-lang.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 68px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  padding-right: 20px;
}

.lang-nice:after {
  content: "▾";
  position: absolute;
  right: 6px;
}

.lang-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 68px;
  height: 72px;
  background-image: url(./bg-select-lang-2.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  z-index: 999;
  overflow: hidden;
}

.lang-list.open {
  display: block;
}

.lang-item {
  padding: 7px 16px;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  color: #85360F;
}

.lang-item:hover {
  background: #f3f3f3;
}

.lang-item.active {
  background: #000;
  color: #fff;
  display: none;
}