/* ==========================================================================
   va-tam.css — bù các lớp mà Flatsome KHÔNG có luật

   BỐI CẢNH. Site đổi từ theme tự viết `bachkhoa` sang Flatsome. Ba file CSS của
   theme cũ (layout.css, components.css, extras.css, ~1.775 dòng) cố tình KHÔNG
   được chép sang, vì chúng định nghĩa lại chính những lớp Flatsome đã có
   (.row, .col, .section, .button…) và sẽ đá nhau khắp nơi.

   Nhưng trong đống đó có một số lớp Flatsome không hề có. Đã đối chiếu từng cái
   với phần prelude của flatsome.css: cả 23 selector dưới đây đều trống. Thiếu
   chúng thì trang mất kiểu dáng ở những chỗ thấy rõ bằng mắt — ảnh khách hàng
   thành vuông, thẻ tin tức mất cỡ chữ, đoạn trích tràn dài.

   ĐÂY LÀ FILE TẠM. Mỗi khối chuyển sang mã ngắn Flatsome ([testimonial],
   [blog_posts], [featured_box]…) thì xoá phần tương ứng ở đây đi. Khi chuyển
   xong hết, cả file này biến mất.

   ĐỪNG thêm luật cho: .x/.y/.md-x/.lg-y, .box-text-inner, .box-text-bottom,
   .blog-post-inner, .bg-loaded, .rating, .large-*/.medium-*/.small-*.
   Chúng là output gốc của Flatsome, cố tình để trơ — thêm vào là phá.

   Màu: dùng var(--primary-color) do Theme Options cấp (đặt #38308c ở
   Customizer › Style › Colors), thay cho biến --bk-heading của theme cũ.
   ========================================================================== */


/* ------------------------------------------------------------ cảm nhận ---
   Nặng nhất về hình ảnh: thiếu border-radius thì ảnh khách hàng vuông chằn chặn.
   66 lượt render. Nguồn: components.css:244-265, extras.css:289-290. */

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

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

/* Đo trên trang gốc: chữ nhận xét 16px/22.4px, tên khách 16px đậm, cả hai
   màu đen như chữ thân bài — không phải màu tiêu đề. */
.testimonial-text { line-height: 1.4; }
.testimonial-text p { margin-bottom: .6em; }

.testimonial-meta {
  font-size: 1em;
  line-height: 1.6;
}
.testimonial-name {
  display: block;
  font-weight: 700;
  color: inherit;
}
.testimonial-company {
  display: block;
  opacity: .7;
  font-size: .9em;
}

/* Hai lớp cũ đi kèm trong cùng markup. */
.test_name { font-weight: 700; }
.test_company { opacity: .75; font-size: .9em; }


/* ------------------------------------------------------ thẻ tin tức ---
   80-94 lượt. Nguồn: components.css:505-530, :38. */

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

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

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

.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;
}

/* Badge ngày tháng trên ảnh bài viết — thiếu thì ngày và tháng dính một dòng.
   Nguồn: extras.css:87-88. */
.post-date-day { display: block; font-size: 1.25em; font-weight: 700; }
.post-date-month { display: block; font-size: .78em; text-transform: uppercase; }


/* --------------------------------------------------- tiêu đề mục ---
   min-width:0 là BẮT BUỘC, không phải trang trí: 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 nó thì tiêu đề dài sẽ đẩy hai
   gạch trang trí hai bên ra ngoài khung. Nguồn: components.css:227. */

.section-title-main {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 .6em;
  line-height: 1.3;
}


/* ------------------------------------------------ tàn dư theme mona ---
   Các lớp này đến từ NỘI DUNG trang (đã nhập sẵn trong database), không phải
   từ mã theme. Nguồn: extras.css:136-165, components.css:1033, :1037. */

.short_content { overflow: hidden; }   /* thiếu là đoạn trích tràn dài */
.item-desc { font-size: .95em; }

/* Cột [bk_o nho="1"] — giữ đúng cỡ chữ 15,2px của .item-desc cũ. Luật này có ở
   extras.css:324 của theme cũ nhưng bị sót khi lập file này; thiếu nó thì chữ
   trong các cột "nho" to lên 5%. Dùng ở /sua-binh-nong-lanh/ và /sua-may-giat/. */
.bk-o-nho { font-size: .95em; }

.sec-tt {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: .8em;
  color: var(--primary-color);
}

.btn-btn-why-me {
  display: block;
  margin-bottom: .35em;
  font-weight: 700;
  color: var(--primary-color);
}
.btn-btn-why-me p { margin: 0; }
.text-why-me-in { font-size: .95em; }
.text-why-me-in > p:last-child { margin-bottom: 0; }

.person-name { display: block; font-weight: 700; color: var(--primary-color); }
.person-title { display: block; font-size: .88em; opacity: .75; }


/* ------------------------------------------------- khối "Lý do nên chọn" ---
   .title và .sub là tên RẤT chung. Chúng cũng được dùng cho tiêu đề trong các
   form wp-admin (h2.title ở 20+ chỗ), và .title còn là lớp của WordPress core.
   Vì vậy phải giới hạn trong đúng khối, KHÔNG đặt luật toàn cục.
   Nguồn: extras.css:113, :288. */

#bk-lydo .title { font-weight: 700; color: var(--primary-color); }
#bk-lydo .sub { font-size: .85em; opacity: .8; }


/* ------------------------------------------- widget "Tìm kiếm" thanh bên ---
   Widget này là block core/search của Gutenberg — Flatsome ra đời trước nên
   không có luật nào cho .wp-block-search. Hệ quả đo được: nút bị flex bó ngang
   (83px trong khi chữ "Tìm kiếm" + padding cần ~112px) nên gãy thành hai dòng,
   cộng padding dọc 12px thành cái hộp cao 77px cạnh ô nhập 39px.

   Sửa: nút không được gãy dòng và không co (ô nhập co thay — nó có flex-grow),
   kéo hai bên cao bằng nhau, chữ căn giữa theo trục đứng. */

.wp-block-search__inside-wrapper { align-items: stretch; }

.wp-block-search__button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}


/* ------------------------------------------------------------- tiện ích ---
   Nguồn: layout.css:261, :276, :288. */

.italic { font-style: italic; }        /* Flatsome chỉ có .is-italic */
.p-last-0 p:last-child { margin-bottom: 0; }

/* Spacer do UX Builder chèn — chiều cao đến từ style nội tuyến, ở đây chỉ cần
   bảo đảm nó là block chiếm trọn chiều ngang. 106 lượt. */
.gap-element {
  display: block;
  width: 100%;
}


/* ------------------------------------------------------- ẩn icon hỏng ---
   Nội dung cào về có 16 chỗ dùng icon font "sui" của một plugin không còn.
   Không có file font ⇒ trình duyệt vẽ ô vuông tofu. Nguồn: extras.css:130-132. */

.sui,
[class^="sui-"],
[class*=" sui-"] { display: none; }


/* --------------------------------------------- lưới an toàn cho hiệu ứng ---
   Nội dung gốc dùng WOW.js / AOS để 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ị — thiếu luật này mà lỡ có thư viện
   nào set opacity:0 thì nội dung biến mất hẳn. Nguồn: extras.css:117-127,
   components.css:1030-1031. */

.wow,
.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown,
.fadeIn,
.aos-init,
.aos-animate {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}