/* Site "rent" — override áp dụng cho MỌI trang (trang chủ lẫn trang con), load SAU variables.css,
   TRƯỚC theme suxnix (xem thứ tự load trong CLAUDE.md mục 5). */

/* ----------------------------------------------------------------------
   1. Đồng bộ font chữ trang con với trang chủ (Exo 2 cho tiêu đề, Sarabun cho nội dung).
   Theme suxnix dùng biến --tg-heading-font-family/--tg-body-font-family nhưng tự định nghĩa lại
   các biến đó trong :root của chính nó (load SAU file này) nên đổi biến ở đây sẽ bị ghi đè —
   phải ép trực tiếp lên h1-h6/body bằng !important (cùng kỹ thuật đã dùng ở trang chủ). */
body.site-rent {
  font-family: 'Sarabun', sans-serif !important;
}
body.site-rent :where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Exo 2', sans-serif !important;
}

/* ----------------------------------------------------------------------
   2. Nút "lên đầu trang" (#goToTopBtn, dùng chung toàn hệ thống) — reskin tròn/đen giống
   nút .ak-scrollup gốc của theme Cras ở trang chủ, để đồng nhất giữa trang chủ và trang con.
   Trang chủ không còn dùng .ak-scrollup riêng nữa — dùng chung #goToTopBtn này. */
body.site-rent #goToTopBtn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  margin-top: 12px;
}
body.site-rent #goToTopBtn:hover {
  background-color: #ff3d24;
  color: #fff;
}

/* ----------------------------------------------------------------------
   3. Nút tìm kiếm trên thanh menu trang con (.site-search-btn, button thật) — hệ thống dùng chung
   bo góc theo biến --btn-radius (xem shared/base.css), nhưng theme Cras của rent dùng toàn góc vuông
   (các nút .common-btn/.more-btn ở trang chủ là thẻ <a> nên không bị áp luật bo góc này, còn nút tìm
   kiếm là <button> thật nên vẫn bị bo tròn) — bỏ bo góc riêng cho nút này để khớp phong cách chung. */
body.site-rent .site-search-btn {
  border-radius: 0;
}

/* ----------------------------------------------------------------------
   4. Phân trang (Bootstrap .pagination) ở trang danh sách sản phẩm/tin tức — mặc định dùng màu xanh
   Bootstrap, đổi sang đúng màu chủ đạo #ff3d24 của site và bỏ bo góc cho đồng nhất với theme Cras. */
body.site-rent .pagination .page-link {
  color: #ff3d24;
  border-radius: 0 !important;
}
body.site-rent .pagination .page-item.active .page-link {
  background-color: #ff3d24;
  color: #fff;
}
body.site-rent .pagination .page-link:hover {
  color: #fff;
  background-color: #e62e17;
}
body.site-rent .pagination .page-item.disabled .page-link {
  color: #aaa;
}

/* ----------------------------------------------------------------------
   5. Trang chi tiết sản phẩm (Livewire product-detail-page) — các class này chỉ xuất hiện riêng
   ở trang này nên ghi đè ở đây coi như chỉ áp dụng cho trang chi tiết sản phẩm: nút chọn biến thể,
   nút thêm giỏ hàng/yêu thích, ô tăng giảm số lượng, nút "xem thêm" sản phẩm liên quan — tất cả
   đều đang bo tròn theo theme suxnix mặc định, đổi về góc vuông cho khớp phong cách Cras. */
body.site-rent .product-option-btn,
body.site-rent .cart-btn,
body.site-rent .inner-shop-perched-info > .wishlist-btn,
body.site-rent .quickview-cart-plus-minus input,
body.site-rent .related-products-area .shop-content-bottom .btn {
  border-radius: 0 !important;
}

/* ----------------------------------------------------------------------
   6. Đồng bộ với trang chủ: tiêu đề breadcrumb (.q-7, vd "Tin tức") đang để font-weight:100 (rất
   mảnh, xem public/css/shared/pages/home.css) — trong khi heading ở trang chủ (vendor/style.css)
   mặc định đậm (font-weight:700) — đổi đậm cho khớp. Menu trang con (.site-nav-link) đang
   font-size:14px (xem shared/components/header.css) trong khi menu trang chủ kế thừa font-size
   18px của body theo theme Cras — tăng lên cho bằng. */
body.site-rent .q-7 {
  font-weight: 700;
}
body.site-rent .site-nav-link {
  font-size: 18px;
}