/* ==========================================================================
   extras.css — bù các class còn thiếu sau khi đối chiếu với trang đã render:
   hệ số cột (*-columns-N), hàng trượt ngang, badge ngày trên thumbnail,
   lưới WPBakery của 2 trang cũ, và vài class của child theme cũ.
   ========================================================================== */

/* ------------------------------------------------- hệ số cột (columns-N)

   Khác với .large-3 (đặt trên từng cột), .large-columns-3 đặt trên .row và
   quyết định bề rộng cho MỌI .col con. Nội dung dùng nó ở lưới dịch vụ và
   danh sách tin tức; thiếu nó thì các thẻ xếp chồng full-width. */

.small-columns-1 > .col { flex-basis: 100%;     max-width: 100%; }
.small-columns-2 > .col { flex-basis: 50%;      max-width: 50%; }
.small-columns-3 > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
.small-columns-4 > .col { flex-basis: 25%;      max-width: 25%; }
.small-columns-5 > .col { flex-basis: 20%;      max-width: 20%; }
.small-columns-6 > .col { flex-basis: 16.6667%; max-width: 16.6667%; }

@media (min-width: 550px) {
  .medium-columns-1 > .col { flex-basis: 100%;     max-width: 100%; }
  .medium-columns-2 > .col { flex-basis: 50%;      max-width: 50%; }
  .medium-columns-3 > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
  .medium-columns-4 > .col { flex-basis: 25%;      max-width: 25%; }
  .medium-columns-5 > .col { flex-basis: 20%;      max-width: 20%; }
  .medium-columns-6 > .col { flex-basis: 16.6667%; max-width: 16.6667%; }
}

@media (min-width: 850px) {
  .large-columns-1 > .col { flex-basis: 100%;     max-width: 100%; }
  .large-columns-2 > .col { flex-basis: 50%;      max-width: 50%; }
  .large-columns-3 > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
  .large-columns-4 > .col { flex-basis: 25%;      max-width: 25%; }
  .large-columns-5 > .col { flex-basis: 20%;      max-width: 20%; }
  .large-columns-6 > .col { flex-basis: 16.6667%; max-width: 16.6667%; }
}

/* --------------------------------------------------- hàng trượt ngang

   .row-slider là một .row nhưng cuộn ngang thay vì xuống dòng.
   Bề rộng mỗi item vẫn do *-columns-N ở trên quyết định. */

.row-slider {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.row-slider::-webkit-scrollbar { display: none; }
.row-slider > .col {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* ------------------------------------------------------- badge ngày đăng */

.badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  background-color: var(--bk-primary);
  color: #fff;
  font-size: .85em;
  line-height: 1.1;
  text-align: center;
}
.badge.absolute { position: absolute; }
.badge.absolute.top { top: 0; left: 0; }
.badge-inner {
  display: block;
  padding: .25em .4em;
  width: 100%;
}
.badge-outline {
  background-color: transparent;
  border: 2px solid var(--bk-primary);
  color: var(--bk-primary);
}
.badge-outline .badge-inner { background: rgba(255, 255, 255, .92); }
.badge.circle { border-radius: 50%; }
.post-date-day { display: block; font-size: 1.25em; font-weight: 700; }
.post-date-month { display: block; font-size: .78em; text-transform: uppercase; }
.is-xsmall { font-size: .78em; }

/* Ảnh trong box cần là mốc định vị cho badge */
.box-image { position: relative; }
.box-image-inner { position: relative; display: block; }

/* --------------------------------------------------- thứ tự ảnh / chữ */

/* box-text-bottom nằm trên chính thẻ .box (không phải thẻ con), nghĩa là
   "chữ nằm dưới ảnh" — đúng bằng thứ tự DOM sẵn có, nên không cần luật nào.
   Chỉ box-text-top mới phải đảo, và nó đảo bằng flex trên chính .box. */
.box.box-text-top {
  display: flex;
  flex-direction: column;
}
.box.box-text-top > .box-image { order: 1; }
.box.box-text-top > .box-text  { order: 0; }

/* ------------------------------------------------------------- flex/util */

.flex { display: flex; }
.stack { display: flex; }
.centered { margin-left: auto; margin-right: auto; text-align: center; }
.thin-font { font-weight: 300; }
.sub { font-size: .85em; opacity: .8; }

/* Nội dung gốc dùng WOW.js + animate.css để hiện dần khi cuộn.
   Không nạp thư viện đó, nên phải chắc chắn mọi khối luôn hiển thị. */
.wow,
.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown,
.fadeIn {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Icon font của plugin cũ — không có file font, ẩn đi để không lộ ô vuông */
.sui,
[class^="sui-"],
[class*=" sui-"] { display: none; }

/* ----------------------------------------------- child theme cũ (mona) */

.sec-tt {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: .8em;
  color: var(--bk-heading);
}
.featured-box { position: relative; }
.btn-btn-why-me {
  display: inline-block;
  padding: .6em 1.4em;
  border-radius: 3px;
  background-color: var(--bk-secondary);
  color: #fff;
  font-weight: 700;
}
.btn-btn-why-me:hover { color: #fff; filter: brightness(1.1); }
.text-why-me-in { font-size: .95em; }
.person-name { display: block; font-weight: 700; color: var(--bk-heading); }
.person-title { display: block; font-size: .88em; opacity: .75; }

/* ------------------------------------------- lưới WPBakery (2 trang cũ)

   /sua-chua-tu-lanh/ và /sua-robot-hut-bui/ được dựng bằng WPBakery chứ
   không phải UX Builder, nên cần bộ lưới riêng của nó. */

.vc_row,
.wpb_row {
  display: flex;
  flex-flow: row wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.vc_row::after { content: ""; display: table; clear: both; }

.vc_column_container,
.wpb_column {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.vc_column-inner { position: relative; width: 100%; }

.vc_col-sm-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
.vc_col-sm-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
.vc_col-sm-3  { flex-basis: 25%;      max-width: 25%; }
.vc_col-sm-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.vc_col-sm-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
.vc_col-sm-6  { flex-basis: 50%;      max-width: 50%; }
.vc_col-sm-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.vc_col-sm-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
.vc_col-sm-9  { flex-basis: 75%;      max-width: 75%; }
.vc_col-sm-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.vc_col-sm-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.vc_col-sm-12 { flex-basis: 100%;     max-width: 100%; }

/* WPBakery gốc chỉ chia cột từ 768px trở lên */
@media (max-width: 767px) {
  [class*="vc_col-sm-"] { flex-basis: 100%; max-width: 100%; }
}

.wpb_content_element,
.wpb_text_column { margin-bottom: 1.4em; }
.wpb_wrapper > *:last-child { margin-bottom: 0; }
.vc_row-fluid { width: 100%; }

/* ------------------------------------------------- lớp chữ đè lên banner

   Cấu trúc: .banner (cao bằng padding-top nội tuyến)
               > .banner-inner.fill
                   > .banner-bg.fill > .bg.fill.bg-fill   (ảnh nền)
                   > .banner-layers.container
                       > .text-box.banner-layer.x50.y100  (khối chữ)

   x/y là toạ độ phần trăm bên trong banner. Dùng biến CSS để hai trục
   cùng gộp vào một transform, thay vì hai luật transform ghi đè nhau. */

.banner-inner { position: relative; width: 100%; height: 100%; }
.banner-bg { overflow: hidden; }
.banner-layers {
  position: relative;
  height: 100%;
  z-index: 2;
}
.banner-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.banner-layer,
.text-box {
  position: absolute;
  --bk-x: 50%;
  --bk-y: 50%;
  left: var(--bk-x);
  top: var(--bk-y);
  transform: translate(calc(var(--bk-x) * -1), calc(var(--bk-y) * -1));
  z-index: 4;
  max-width: 100%;
}

.text-box-content { display: block; }
.text-inner { padding: .5em; }
.res-text { font-size: 100%; }

.x0   { --bk-x: 0%; }    .y0   { --bk-y: 0%; }
.x10  { --bk-x: 10%; }   .y10  { --bk-y: 10%; }
.x20  { --bk-x: 20%; }   .y20  { --bk-y: 20%; }
.x25  { --bk-x: 25%; }   .y25  { --bk-y: 25%; }
.x30  { --bk-x: 30%; }   .y30  { --bk-y: 30%; }
.x40  { --bk-x: 40%; }   .y40  { --bk-y: 40%; }
.x50  { --bk-x: 50%; }   .y50  { --bk-y: 50%; }
.x60  { --bk-x: 60%; }   .y60  { --bk-y: 60%; }
.x70  { --bk-x: 70%; }   .y70  { --bk-y: 70%; }
.x75  { --bk-x: 75%; }   .y75  { --bk-y: 75%; }
.x80  { --bk-x: 80%; }   .y80  { --bk-y: 80%; }
.x90  { --bk-x: 90%; }   .y90  { --bk-y: 90%; }
.x100 { --bk-x: 100%; }  .y100 { --bk-y: 100%; }

@media (min-width: 550px) {
  .md-x0   { --bk-x: 0%; }    .md-y0   { --bk-y: 0%; }
  .md-x10  { --bk-x: 10%; }   .md-y10  { --bk-y: 10%; }
  .md-x20  { --bk-x: 20%; }   .md-y20  { --bk-y: 20%; }
  .md-x25  { --bk-x: 25%; }   .md-y25  { --bk-y: 25%; }
  .md-x30  { --bk-x: 30%; }   .md-y30  { --bk-y: 30%; }
  .md-x40  { --bk-x: 40%; }   .md-y40  { --bk-y: 40%; }
  .md-x50  { --bk-x: 50%; }   .md-y50  { --bk-y: 50%; }
  .md-x60  { --bk-x: 60%; }   .md-y60  { --bk-y: 60%; }
  .md-x70  { --bk-x: 70%; }   .md-y70  { --bk-y: 70%; }
  .md-x75  { --bk-x: 75%; }   .md-y75  { --bk-y: 75%; }
  .md-x80  { --bk-x: 80%; }   .md-y80  { --bk-y: 80%; }
  .md-x90  { --bk-x: 90%; }   .md-y90  { --bk-y: 90%; }
  .md-x100 { --bk-x: 100%; }  .md-y100 { --bk-y: 100%; }
}

@media (min-width: 850px) {
  .lg-x0   { --bk-x: 0%; }    .lg-y0   { --bk-y: 0%; }
  .lg-x10  { --bk-x: 10%; }   .lg-y10  { --bk-y: 10%; }
  .lg-x20  { --bk-x: 20%; }   .lg-y20  { --bk-y: 20%; }
  .lg-x25  { --bk-x: 25%; }   .lg-y25  { --bk-y: 25%; }
  .lg-x30  { --bk-x: 30%; }   .lg-y30  { --bk-y: 30%; }
  .lg-x40  { --bk-x: 40%; }   .lg-y40  { --bk-y: 40%; }
  .lg-x50  { --bk-x: 50%; }   .lg-y50  { --bk-y: 50%; }
  .lg-x60  { --bk-x: 60%; }   .lg-y60  { --bk-y: 60%; }
  .lg-x70  { --bk-x: 70%; }   .lg-y70  { --bk-y: 70%; }
  .lg-x75  { --bk-x: 75%; }   .lg-y75  { --bk-y: 75%; }
  .lg-x80  { --bk-x: 80%; }   .lg-y80  { --bk-y: 80%; }
  .lg-x90  { --bk-x: 90%; }   .lg-y90  { --bk-y: 90%; }
  .lg-x100 { --bk-x: 100%; }  .lg-y100 { --bk-y: 100%; }
}

/* Mặt nạ trang trí của theme gốc — bỏ qua, không ảnh hưởng bố cục */
[class*="mask-angled"] { -webkit-mask-image: none; mask-image: none; }

/* ------------------------------------------------------------ linh tinh */

.title { font-weight: 700; color: var(--bk-heading); }
.test_name { font-weight: 700; }
.test_company { opacity: .75; font-size: .9em; }
.html_topbar_left { white-space: nowrap; }