/* ==========================================================================
   components.css — các khối nội dung: box, ảnh, icon-box, testimonial,
   nút, slider, tiêu đề section, blog, header, footer, nút liên hệ nổi.
   Tất cả viết mới, chỉ bám theo tên class mà nội dung đã render đang dùng.
   ========================================================================== */

/* ------------------------------------------------------------------- box */

.box {
  position: relative;
  width: 100%;
}

.box-image {
  position: relative;
  overflow: hidden;
  display: block;
}
.box-image img {
  display: block;
  width: 100%;
  transition: transform .5s ease, filter .3s ease;
}

.box-text {
  position: relative;
  padding-top: .8em;
  padding-bottom: .5em;
  width: 100%;
}
.box-text-inner { position: relative; }
.box-text.text-center { padding-left: .5em; padding-right: .5em; }

/* Hiệu ứng khi rê chuột lên thẻ có ảnh */
.has-hover .box-image img { will-change: transform; }
.has-hover:hover .box-image img { transform: scale(1.06); }

.box-normal .box-text { padding-top: .9em; }

.box-shade .box-text {
  background-color: #f7f7f7;
  padding: 1em;
}

/* --------------------------------------------------------------- ảnh (img) */

.img {
  position: relative;
  display: block;
  margin-bottom: 0;
}

.img-inner {
  position: relative;
  overflow: hidden;
}
.img-inner img {
  display: block;
  width: 100%;
}

/* .image-cover: tỉ lệ khung do padding-top nội tuyến quyết định,
   ảnh bên trong phủ kín khung. */
.img-inner.image-cover,
.image-cover {
  position: relative;
  height: 0;
}
.img-inner.image-cover img,
.image-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img .img-inner.dark { background-color: transparent; }

/* Bộ class định vị x/y do UX Builder sinh; chỉ có tác dụng khi nằm
   trong khối định vị tuyệt đối (banner). Ngoài banner chúng vô hại. */
.banner .img.x,
.banner .img.y { position: absolute; }

.img.x, .img.y,
.img.md-x, .img.md-y,
.img.lg-x, .img.lg-y { transform: none; }

/* Ảnh có chú thích (chèn bằng chức năng Chú thích của WordPress).

   Nội dung nhập từ trang nguồn có vài thẻ <figure> ghi cứng bề ngang ngay trong
   thuộc tính style, ví dụ style="width:1020px" và style="width:1200px". Luật
   `img { max-width: 100% }` ở layout.css chỉ ghì được ẢNH, không ghì được THẺ BỌC
   ảnh — nên thẻ figure vẫn rộng 1020px và đẩy tràn cả trang trên điện thoại.

   Phải dùng max-width chứ không phải width: trong CSS, max-width thắng width kể cả
   khi width được viết thẳng trong thuộc tính style của thẻ. Nhờ vậy không cần
   !important, và ảnh vẫn hiện đúng bề ngang thật khi màn hình đủ rộng. */
.wp-caption,
figure {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption img,
figure img {
  max-width: 100%;
  height: auto;
}

.wp-caption-text,
figcaption {
  margin: .5em 0 1.2em;
  color: var(--bk-body);
  font-size: .85em;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ---------------------------------------------------------------- banner */

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.banner-layers {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner .bg { z-index: 0; }

/* -------------------------------------------------------------- icon-box */

.icon-box {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-bottom: 1em;
}

.icon-box-img {
  flex: 0 0 auto;
  margin-right: 1em;
  max-width: 100%;
}
.icon-box-img img { display: block; width: 100%; }

.icon-box-text {
  flex: 1 1 auto;
  min-width: 0;
}
.icon-box-text > *:last-child { margin-bottom: 0; }

/* Biến thể xếp dọc: ảnh nằm trên, chữ nằm dưới */
.icon-box.icon-box-top {
  flex-direction: column;
  align-items: stretch;
}
.icon-box.icon-box-top > .icon-box-img {
  margin-right: 0;
  margin-bottom: .8em;
}
.icon-box.icon-box-top.text-center > .icon-box-img { margin-left: auto; margin-right: auto; }

.icon-box.icon-box-left { flex-direction: row; }
.icon-box.icon-box-right { flex-direction: row-reverse; }
.icon-box.icon-box-right > .icon-box-img { margin-right: 0; margin-left: 1em; }

.icon-box.text-center:not(.icon-box-left):not(.icon-box-right) { text-align: center; }

.icon-box .icon-box-img.circle img { border-radius: 50%; }

/* ---------------------------------------------------------- section-title */

.section-title-container { margin-bottom: 1.2em; }

/* flex-wrap: wrap cho phép tiêu đề dài xuống hàng riêng, lúc đó hai đường kẻ trang
   trí tự dàn hết chiều ngang ở hàng trên và hàng dưới — đúng như trang gốc làm.
   Bỏ dòng này thì trên màn hình hẹp hai đường kẻ bị bóp còn 0px và biến mất. */
.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 .5em;
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bk-heading);
}

.section-title b {
  flex: 1 1 auto;
  height: 2px;
  background-color: currentColor;
  opacity: .15;
  display: block;
}

/* Hai giá trị dưới đây quyết định trang có bị tràn ngang trên điện thoại hay không.

   flex: 0 1 auto  — số 0 ở giữa mới là chỗ quan trọng. Nếu để 0 (cấm co lại) thì tiêu
   đề dài giữ nguyên bề ngang tự nhiên của nó và đẩy tràn cả trang; ví dụ "Giá trị khác
   biệt của Điện lạnh, Điện tử Bách Khoa" chiếm 497px trong khung máy 390px.

   min-width: 0  — bắt buộc phải có. Phần tử flex mặc định không chịu co nhỏ hơn nội
   dung bên trong, nên thiếu dòng này thì sửa flex ở trên cũng vô tác dụng.

   Kết quả: tiêu đề dài tự xuống dòng, hai đường kẻ trang trí hai bên vẫn giữ nguyên. */
.section-title-main {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 .6em;
  line-height: 1.3;
}

/* Mặc định gạch chỉ nằm bên phải; bản -center thì hai bên. */
.section-title-normal b:first-child { display: none; }
.section-title-center { justify-content: center; text-align: center; }
.section-title-center b:first-child { display: block; }

.section-title-bold b,
.section-title-bold-center b { height: 3px; opacity: .2; }

/* ----------------------------------------------------------- testimonial */

.testimonial-box { margin-bottom: 1.5em; }

.testimonial-image { max-width: 100%; }
.testimonial-image img { border-radius: 50%; }

.testimonial-text p { margin-bottom: .6em; }

.testimonial-meta {
  font-size: .9em;
  line-height: 1.4;
}
.testimonial-name {
  display: block;
  font-weight: 700;
  color: var(--bk-heading);
}
.testimonial-company {
  display: block;
  opacity: .7;
  font-size: .9em;
}

/* Sao đánh giá vẽ bằng ký tự, không cần font icon */
.star-rating {
  position: relative;
  display: inline-block;
  width: 5.4em;
  height: 1.2em;
  font-size: .9em;
  line-height: 1.2;
  overflow: hidden;
  vertical-align: middle;
  color: #f5a623;
}
.star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0; top: 0;
  letter-spacing: .1em;
  color: #d8d8d8;
}
.star-rating > span {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  overflow: hidden;
  display: block;
}
.star-rating > span::before {
  content: "\2605\2605\2605\2605\2605";
  letter-spacing: .1em;
  color: #f5a623;
  white-space: nowrap;
}
.star-rating .rating { display: none; }

/* ---------------------------------------------------------------- divider */

.is-divider {
  display: block;
  height: 3px;
  width: 50px;
  margin: 1em 0;
  background-color: rgba(0, 0, 0, .1);
}
.is-divider.is-large { height: 4px; width: 90px; }
.is-divider.is-small { height: 2px; width: 30px; }
.text-center .is-divider { margin-left: auto; margin-right: auto; }
.dark .is-divider { background-color: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------------ nút */

/* Các số đo dưới đây lấy từ chính trang gốc (đo bằng getComputedStyle), đừng làm
   tròn cho "đẹp": chiều cao nút do line-height 2.4em + min-height 2.5em quyết định
   chứ KHÔNG phải padding dọc — padding dọc bằng 0. Đặt padding dọc khác 0 sẽ làm
   nút cao hơn bản gốc. Bo góc bằng 0; nút nào bo tròn là do inline style riêng. */
.button,
button,
input[type="submit"],
.wpcf7-submit {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.5em;
  padding: 0 1.2em;
  margin: 0 0 1em;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 0;
  background-color: var(--bk-primary);
  color: #fff;
  font-family: inherit;
  font-size: .97em;
  font-weight: 700;
  line-height: 2.4em;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  transition: background .3s ease, border .3s ease, box-shadow .3s ease, color .3s ease, opacity .3s ease;
}
.button span { display: inline-block; line-height: 1.6; }

/* Trang gốc làm tối nút khi rê chuột bằng một lớp đen mờ phủ bên trong,
   không phải làm sáng lên. */
.button:hover,
button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  color: #fff;
  opacity: 1;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2);
}

.button.secondary { background-color: var(--bk-secondary); }
.button.white { background-color: #fff; color: var(--bk-heading); }
.button.white:hover { color: var(--bk-primary); }
.button.is-outline {
  background-color: transparent;
  border: 2px solid currentColor;
  color: var(--bk-primary);
}
.button.is-outline:hover { background-color: var(--bk-primary); color: #fff; }

.button.is-large { padding: .85em 1.8em; font-size: 1.1em; }
.button.is-small { padding: .4em .9em; font-size: .8em; }
.button.is-xlarge { padding: 1em 2.2em; font-size: 1.3em; }

/* .button.plain và .icon.plain là link trần, không nền */
.button.plain,
.icon.plain {
  background: none;
  padding: 0;
  color: inherit;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: inherit;
  margin-bottom: 0;
  /* khử viền và chiều cao tối thiểu thừa hưởng từ khối .button ở trên */
  border-color: transparent;
  min-height: 0;
}
.button.plain:hover,
.icon.plain:hover { filter: none; box-shadow: none; }

/* ------------------------------------------------------- lớp màu "alert" */

/* Cẩn thận: ở đây "alert" KHÔNG phải hộp thông báo, mà là một lớp MÀU dùng kèm
   .button để ra nút đỏ. Nội dung site đang có 76 nút "GỌI NGAY 0961 992 617"
   viết là class="button alert" — đây là nút gọi hành động chính của cả website.

   Vì vậy đừng viết .alert thành component hộp thông báo (nền xám, border-left):
   luật đó nằm sau khối .button và cùng độ ưu tiên nên sẽ đè mất màu nền của nút,
   thành chữ trắng trên nền trắng — nút biến mất mà nhìn HTML không thấy gì sai. */

.alert { background-color: var(--bk-alert); color: #fff; }

.alert.is-link,
.alert.is-outline,
.alert.is-underline {
  background-color: transparent;
  color: var(--bk-alert);
}
.alert.is-outline:hover {
  background-color: var(--bk-alert);
  border-color: var(--bk-alert);
  color: #fff;
}

.alert-color { color: var(--bk-alert); }

/* --------------------------------------------------------------- slider */

/* Carousel tối giản: cuộn ngang có bám điểm, kèm 2 nút điều hướng.
   Thay cho thư viện carousel của theme gốc. */
.slider-wrapper { position: relative; }

.slider {
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider::-webkit-scrollbar { display: none; }

/* Một slide chiếm trọn bề rộng — nhưng KHÔNG áp cho .row-slider, vì ở đó
   số cột hiển thị do lớp *-columns-N quyết định (xem extras.css). */
.slider:not(.row-slider) > * {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
}

.slider.row > .col { flex-shrink: 0; }

.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transition: opacity .25s ease;
}
.slider-wrapper:hover .slider-nav-btn,
.slider-nav-btn:focus-visible { opacity: 1; }
.slider-nav-btn[disabled] { opacity: 0 !important; pointer-events: none; }
.slider-nav-prev { left: 8px; }
.slider-nav-next { right: 8px; }

.slider-nav-light .slider-nav-btn { background: rgba(255, 255, 255, .9); color: #222; }
.slider-nav-dark  .slider-nav-btn { background: rgba(0, 0, 0, .5); color: #fff; }
.slider-nav-large .slider-nav-btn { width: 52px; height: 52px; font-size: 24px; }
.slider-nav-circle .slider-nav-btn { border-radius: 50%; }

/* Trước khi JS chạy, chỉ hiện slide đầu để tránh nháy toàn bộ slide.
   Không áp cho .row-slider: ở đó nhiều cột phải hiện cùng lúc, và nếu JS
   không chạy được thì các cột vẫn phải nhìn thấy chứ không được biến mất. */
.slider:not(.slider-ready):not(.row-slider) > *:not(:first-child) { display: none; }

.loading-spin { display: none; }

/* ------------------------------------------------------------------ blog */

.post-item { margin-bottom: 1em; }

.box-blog-post .box-text { padding-top: 1em; }

.post-title {
  display: block;
  margin: 0 0 .3em;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bk-heading);
}
a.post-title:hover { color: var(--bk-primary); }

.post-meta {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .7;
  margin-bottom: .5em;
}

.from_the_blog_excerpt {
  font-size: .92em;
  line-height: 1.55;
  margin-bottom: .6em;
}

.entry-content > *:last-child { margin-bottom: 0; }

.entry-header { margin-bottom: 1.4em; }
.entry-title { font-size: 1.8em; margin-bottom: .3em; }
.entry-meta {
  font-size: .85em;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .7;
}

.entry-image { margin-bottom: 1.4em; }
.entry-image img { width: 100%; display: block; border-radius: 4px; }

.page-nav { margin: 2em 0; text-align: center; }
.page-nav a { display: inline-block; padding: .4em .9em; }

/* --------------------------------------------------------------- ux-menu */

.ux-menu { display: flex; flex-direction: column; }
.ux-menu.stack-col { flex-direction: column; }
.ux-menu.justify-start { justify-content: flex-start; }

.ux-menu-link { display: block; }
.ux-menu-link__link {
  display: block;
  padding: .35em 0;
  color: inherit;
  line-height: 1.4;
}
.ux-menu-link__link:hover { opacity: .75; }
.ux-menu-link__text { display: inline-block; }

/* ---------------------------------------------------------------- header */

.header {
  position: relative;
  z-index: 30;
  background: #fff;
  width: 100%;
}
.header-wrapper { width: 100%; }

.header-top {
  background-color: var(--bk-primary);
  color: #fff;
  font-size: .82em;
}
.header-top a { color: #fff; }
.header-top .flex-row { min-height: 34px; }

.header-top .nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-top .nav > li { margin: 0; }

.header-main { border-bottom: 1px solid var(--bk-border); }
.header-inner { min-height: 82px; }

#logo { display: flex; align-items: center; margin-right: 30px; }
#logo img {
  display: block;
  max-height: 64px;
  width: auto;
}
#logo .header-logo-dark { display: none; }

/* Trên điện thoại: nút menu nằm bên TRÁI, logo nằm bên PHẢI.

   Thứ tự trong header.php là logo trước, nút menu sau — giữ nguyên như vậy vì
   đó là thứ tự đúng cho màn hình lớn và cũng đúng cho trình đọc màn hình.
   Ở đây chỉ đảo chỗ hiển thị bằng thuộc tính order, không đụng vào HTML.

   Nút menu mang sẵn lớp .flex-left (margin-right: auto) nên khi nó đứng trước,
   khoảng trống dồn hết vào giữa và đẩy logo ra sát mép phải. Trước khi sửa,
   hai thứ này dính sát nhau ở góc trái, cách nhau 0px, nhìn như chồng lên nhau. */
@media (max-width: 849px) {
  .header-inner > #logo {
    order: 2;
    margin-right: 0;
  }
  .header-inner > .flex-col.show-for-medium {
    order: 1;
  }
}

.header-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav > li { margin: 0; }

.header-nav > li > a {
  display: block;
  padding: 10px 12px;
  color: var(--bk-heading);
  font-size: .88em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.4;
}
.header-nav > li > a:hover,
.header-nav > li.active > a,
.header-nav > li.current-menu-item > a { color: var(--bk-primary); }

.nav-box > li > a { border-radius: 3px; }
.nav-box > li:hover > a,
.nav-box > li.active > a { background-color: rgba(0, 0, 0, .04); }

.social-icons { display: flex; align-items: center; gap: 4px; }
.social-icons .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
}

/* Nút mở menu trên mobile */
.mobile-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-icon > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--bk-heading);
}

/* Ngăn kéo menu mobile */
.mobile-menu-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 260px;
  max-width: 84vw;
  background: #fff;
  z-index: 200;
  padding: 20px 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s ease;
  box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
}
.mobile-menu-panel.is-open { transform: translateX(0); }
.mobile-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu-panel li { margin: 0; }
.mobile-menu-panel a {
  display: block;
  padding: 12px 22px;
  color: var(--bk-heading);
  font-weight: 700;
  font-size: .9em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bk-border);
}
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- footer */

.footer-wrapper {
  background-color: var(--bk-primary);
  color: #fff;
}
.footer-wrapper a { color: #fff; }
.footer-wrapper a:hover { color: rgba(255, 255, 255, .78); }
.footer-wrapper .section { padding: 40px 0 20px; }
.footer-wrapper p { margin-bottom: .5em; font-size: .92em; }
.footer-wrapper .section-title { color: #fff; }
.footer-wrapper .section-title b { background-color: rgba(255, 255, 255, .3); }

.absolute-footer {
  background-color: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .8);
  font-size: .82em;
  padding: 14px 0;
  text-align: center;
}

/* Form đăng ký nhận tin ở footer */
.footer-wrapper input[type="email"],
.footer-wrapper input[type="text"] {
  width: 100%;
  padding: .6em .8em;
  margin-bottom: .6em;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: inherit;
}
.footer-wrapper input::placeholder { color: rgba(255, 255, 255, .6); }
.footer-wrapper .wpcf7-submit,
.footer-wrapper input[type="submit"] {
  background-color: var(--bk-secondary);
  width: auto;
}

/* --------------------------------------------------- form (contact form) */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: .6em .8em;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
  font-size: 1em;
  color: var(--bk-heading);
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--bk-primary);
}
textarea { min-height: 130px; }

.wpcf7-form p { margin-bottom: .9em; }
.wpcf7-not-valid-tip { color: #dc3232; font-size: .85em; }
.wpcf7-response-output {
  border: 1px solid currentColor;
  padding: .6em 1em;
  margin: 1em 0 0;
  font-size: .9em;
}

/* --------------------------------------------- nút liên hệ nổi + lên đầu */

#button-contact-vr {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 150;
}
#gom-all-in-one {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.button-contact { position: relative; }

.phone-vr {
  position: relative;
  width: 52px;
  height: 52px;
}
.phone-vr-circle-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(38, 48, 140, .28);
  animation: bk-pulse 1.6s infinite ease-in-out;
}
#phone-vr .phone-vr-circle-fill { background-color: rgba(210, 110, 75, .3); }

.phone-vr-img-circle {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.phone-vr-img-circle a { display: block; width: 100%; height: 100%; }
.phone-vr-img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes bk-pulse {
  0%   { transform: scale(.9); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-vr-circle-fill { animation: none; }
}

/* Popup của plugin liên hệ — không dùng, ẩn đi */
#popup-form-contact-vr,
#popup-showroom-vr { display: none; }

#top-link {
  position: fixed;
  right: 14px;
  bottom: 130px;
  z-index: 149;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
#top-link.is-visible { opacity: 1; visibility: visible; }

/* ------------------------------------------------------- icon (SVG mask) */

/* Theme gốc dùng font icon riêng. Ở đây mỗi icon là một SVG nhúng thẳng
   vào CSS bằng mask, nên không phụ thuộc file font nào. */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Những class dưới đây là bố cục, không phải glyph — không vẽ gì cả */
.icon-box::before,
.icon-box-img::before,
.icon-box-text::before,
.icon-box-left::before,
.icon-box-right::before,
.icon-box-top::before,
.icon-inner::before,
.icon-wrapper::before,
.icon-01::before, .icon-02-discount::before, .icon-03::before,
.icon-04::before, .icon-06::before, .icon-07::before { content: none; }

.icon-phone::before {
  -webkit-mask-image: var(--ico-phone); mask-image: var(--ico-phone);
}
.icon-envelop::before {
  -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail);
}
.icon-facebook::before {
  -webkit-mask-image: var(--ico-facebook); mask-image: var(--ico-facebook);
}
.icon-instagram::before {
  -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram);
}
.icon-twitter::before {
  -webkit-mask-image: var(--ico-twitter); mask-image: var(--ico-twitter);
}
.icon-menu::before {
  -webkit-mask-image: var(--ico-menu); mask-image: var(--ico-menu);
}
.icon-search::before {
  -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search);
}
.icon-check::before {
  -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check);
}
.icon-angle-up::before {
  -webkit-mask-image: var(--ico-up); mask-image: var(--ico-up);
}

:root {
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  --ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.3-1.5 1.6-1.5h1.6V3.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.3H7.5V13h2.7v8h3.2z'/%3E%3C/svg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.8-.1zm0 3.8a6 6 0 100 12 6 6 0 000-12zm0 9.9a3.9 3.9 0 110-7.8 3.9 3.9 0 010 7.8zm7.6-10.1a1.4 1.4 0 11-2.8 0 1.4 1.4 0 012.8 0z'/%3E%3C/svg%3E");
  --ico-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 5.9c-.7.3-1.5.5-2.4.6.9-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1a4.1 4.1 0 00-7 3.8A11.7 11.7 0 013.4 4.6a4.1 4.1 0 001.3 5.5c-.7 0-1.3-.2-1.9-.5 0 2 1.4 3.7 3.3 4.1-.6.2-1.2.2-1.8.1a4.1 4.1 0 003.8 2.9A8.3 8.3 0 012 18.4a11.7 11.7 0 006.3 1.9c7.6 0 11.8-6.3 11.8-11.8v-.5c.8-.6 1.5-1.3 2-2.1z'/%3E%3C/svg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E");
  --ico-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l-6 6 1.4 1.4L12 10.8l4.6 4.6L18 14z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- linh tinh khác */

.mona-content > *:last-child { margin-bottom: 0; }
.wpb_wrapper > *:last-child { margin-bottom: 0; }

/* Nội dung gốc dùng AOS để hiện dần khi cuộn; ở đây cho hiện luôn
   để không có khối nào bị "mất tích" khi thiếu thư viện đó. */
.aos-init,
.aos-animate { opacity: 1 !important; transform: none !important; }

.short_content { overflow: hidden; }

.about-item { margin-bottom: 1.2em; }
.item-wrap { position: relative; }
.item-desc { font-size: .95em; }

@media (max-width: 849px) {
  .section { padding: 24px 0; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.35em; }
  .section-title { font-size: 1.2em; }
  #logo img { max-height: 48px; }
  #logo { margin-right: 0; }
  .header-inner { min-height: 62px; }
}