/* ------------------------------------------------------------------

   CSS custom cua du an - load SAU bundle theme (assets/caches/*.css).

   Viet de/ghi de o day, khong sua truc tiep vao file cache.

   ------------------------------------------------------------------ */

.intro .intro__desc {
  --line-clamp: 5;
}

/* Nut hotline/zalo noi (templates/layout/footer.php > .wrap-frame).

   Bundle theme moi khong con rule dinh vi cho khoi nay, khien cac

   .kenit-alo-circle (position:absolute; right:-10px) neo vao body va

   tran ra ngoai mep phai -> sinh thanh cuon ngang. */

.wrap-frame {
  position: fixed;

  right: 20px;

  bottom: 100px;

  width: 50px;

  height: auto;

  z-index: 10;
}

.wrap-frame .btn-frame {
  position: relative;

  margin-bottom: 30px;
}

/* Nhan "Call me:" / "Zalo:" - an mac dinh, truot ra khi hover.

   Rule nay cung khong duoc crawl ve nen nhan dang lo ra ngoai mep phai. */

.wrap-frame .btn-frame span {
  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  width: 0;

  padding: 6px 45px 6px 20px;

  border-radius: 30px;

  color: #fff;

  background-color: var(--clr-brand-primary, #1182fc);

  white-space: nowrap;

  opacity: 0;

  overflow: hidden;

  transition: 0.3s ease-in-out;
}

.wrap-frame .btn-frame:hover span {
  width: 265px;

  opacity: 1;
}

/* Nut "Xem them" cua khoi San pham noi bat (api/load_product.php).

   .home__btn la display:flex nen can margin auto de can giua. */

.product--featured .product__btn {
  margin: 1.5rem auto 0;
}

/* ------------------------------------------------------------------

   Social noi (templates/layout/footer.php)

   - Desktop (>1024px): cot doc ben phai  -> #social

   - Mobile  (<=1024px): thanh ngang duoi -> .toolbar

   Breakpoint 1024px trung voi rps-xl cua theme (luc menu chuyen mobile).

   Dung !important vi jQuery .show() gan display:block vao inline style.

   ------------------------------------------------------------------ */

.toolbar {
  display: none;
}

@media (max-width: 1024px) {
  #social {
    display: none !important;
  }

  .toolbar {
    display: block;
  }
}

/* Hotline noi ben trai (#hotline) - chi hien tren desktop.

   assets/css/hotline.css de mac dinh display:none. */

@media (min-width: 1025px) {
  #hotline {
    display: block;
  }
}

.title-detail .title {
  margin-bottom: 0;
}

.title-detail :is(.title, span) {
  font-weight: 700;

  /* Chữ mượt mà từ ~22px (mobile) lên tới 30px (PC) */
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);

  color: var(--clr-text-primary);

  text-align: left;

  text-transform: uppercase;
}

/* Khoi bai viet SEO thu gon / mo rong (#noidung + .hide-content).

   Bundle theme moi khong crawl ve nhom rule nay, lay lai tu

   assets_old/css/base.css va doi mau gradient theo nen trang (#fff). */

#noidung {
  position: relative;

  max-height: 130px;

  padding-bottom: 50px;

  overflow-y: hidden;
}

#noidung.show-full-content {
  max-height: none;
}

.hide-content {
  position: absolute;

  bottom: 0;

  left: 0;

  z-index: 1;

  width: 100%;

  padding-top: 50px;

  text-align: center;

  background: linear-gradient(transparent, #fff 100%);
}

.hide-content.removeBlur {
  background: transparent;

  padding-top: 0;
}

/* .home__btn la flex + width co dinh -> can gap cho icon va can giua khoi nut. */

.hide-content .home__btn {
  gap: 8px;

  color: var(--clr-text-white, #fff);

  margin-left: auto;

  margin-right: auto;
}

/* Nut loadmore dung chung .home__btn. KHONG dung toi width / height /

   font-size / letter-spacing de hieu ung hover (chu gian ra + glow) giong het

   cac nut .home__btn khac. Doi lai nhan phai du ngan de vua khung 160px. */

.news-load-more.home__btn,
.product-load-more.home__btn {
  gap: 0.35rem;

  white-space: nowrap;

  color: var(--clr-text-white, #fff);
}

/* Span so luong da co gap cua flex, bo padding cua .px-1 cho deu hai ben. */

.news-load-more.home__btn > span,
.product-load-more.home__btn > span {
  padding: 0 !important;
}

/* Danh muc cap 1 o sidebar san pham (templates/layout/sidebar.php).

   Bundle chi co .product__link:hover, chua co trang thai dang xem. */

.product__link.active {
  color: var(--clr-text-hvr);
}

/* ------------------------------------------------------------------

   Bo loc san pham (.wrap-filter). Bundle theme chi co .filter (nut toggle

   mobile) va .sort-select; toan bo panel loc khong duoc crawl ve nen dung

   lai o day, lay mau tu bien thuong hieu.

   ------------------------------------------------------------------ */

.wrap-filter {
  position: relative;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.5rem;

  margin-top: 1rem;
}

.wrap-filter .filter-item {
  position: relative;
}

.wrap-filter .filter-title {
  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 6px 12px;

  border: 1px solid #e0e0e0;

  border-radius: 4px;

  font-size: 14px;

  cursor: pointer;
}

.wrap-filter .filter-title:hover {
  border-color: var(--clr-brand-primary, #1182fc);
}

/* Dem so luong dang chon - an khi = 0 */

.wrap-filter .filter-counter {
  display: none;

  min-width: 18px;

  height: 18px;

  padding: 0 5px;

  border-radius: 9px;

  font-size: 11px;

  line-height: 18px;

  text-align: center;

  color: #fff;

  background-color: var(--clr-brand-primary, #1182fc);
}

.wrap-filter .filter-counter.show {
  display: inline-block;
}

.wrap-filter .filter-dropdown {
  display: none;

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  z-index: 5;

  min-width: 220px;

  max-height: 320px;

  overflow-y: auto;

  padding: 10px;

  border-radius: 4px;

  background-color: #fff;

  box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
}

.wrap-filter .filter-dropdown.show {
  display: block;
}

.wrap-filter .filter-dropdown-list {
  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;
}

.wrap-filter .btn-filter {
  display: inline-block;

  padding: 4px 10px;

  border: 1px solid #e0e0e0;

  border-radius: 4px;

  font-size: 14px;

  white-space: nowrap;

  cursor: pointer;
}

.wrap-filter .btn-filter:hover {
  border-color: var(--clr-brand-primary, #1182fc);
}

.wrap-filter .btn-filter.active {
  color: #fff;

  border-color: var(--clr-brand-primary, #1182fc);

  background-color: var(--clr-brand-primary, #1182fc);
}

.wrap-filter .filter-reset {
  font-size: 14px;

  text-decoration: underline;
}

/* Nut "Xem them" cua ket qua loc */

.filter-more .wrap-more {
  display: flex;

  justify-content: center;

  margin-top: 1.5rem;
}

.filter-more .home__btn {
  gap: 0.35rem;

  white-space: nowrap;

  color: var(--clr-text-white, #fff);
}

/* ------------------------------------------------------------------

   Dropdown "Sap xep" + drawer danh muc mobile (trang san pham).

   Bundle de .sort-select-main la display:grid co dinh va trong cay vao

   Alpine (x-show) de an - ma alpinejs.js khong duoc nap, nen panel luon hien.

   ------------------------------------------------------------------ */

.sort-select .sort-select-main {
  display: none;
}

.sort-select .sort-select-main.show {
  display: grid;
}

.sort-select .click-sort {
  user-select: none;
}

/* Sidebar danh muc: duoi 1025px truot ra tu trai khi bam nut .filter.

   Chi ap dung cho ban .product__left--drawer (trang san pham); sidebar o

   static/news van giu .rps-xl--hidden nhu cu. */

@media (max-width: 1024px) {
  .product--template .filter {
    display: flex;
  }

  .product--template .product__left--drawer {
    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    z-index: 1002;

    width: 280px;

    max-width: 85vw;

    padding: 16px;

    overflow-y: auto;

    background-color: #fff;

    box-shadow: 0 0 8px rgb(0 0 0 / 40%);

    transform: translateX(-100%);

    transition: transform 0.35s ease;
  }

  .product--template .product__left--drawer.show {
    transform: translateX(0);
  }

  .product-drawer-backdrop {
    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1001;

    background-color: rgb(0 0 0 / 45%);
  }
}

/* Muc luc bai viet (Functions::buildToc, dung o news_detail + dichvu_detail).

   Muc luc la cay <ul> long nhau de bundle danh so bang counters(item, '.')

   ra 1, 1.1, 1.2... Bundle lai co .box-readmore ul {padding-left:0 !important}

   nen cap con mat thut le - ghi de lai o day (do cu the cao hon nen thang). */

.box-readmore .toc-list ul {
  padding-left: 1.25rem !important;
}

/* Menu Dich vu: bai viet cap 2 (templates/layout/header.php).

   Bundle da co .menu ul li ul li ul {top:0;left:100%} va hieu ung hover;

   chi bo sung chong tran mep phai + vung dem chuot khi ro sang ngang. */

.menu ul li ul.level1 {
  max-height: 70vh;

  overflow-y: auto;
}

.menu ul li ul li:hover > ul.level1 {
  transform: perspective(600px) translateY(0);
}

/* Tao cau noi vo hinh de chuot khong bi mat hover khi di tu cap 1 sang cap 2 */

.menu ul li ul li.has-child > a::after {
  position: absolute;

  content: "";

  top: 0;

  left: 100%;

  width: 12px;

  height: 100%;
}

/* Neu muc cha nam gan mep phai thi do cap 2 sang ben trai */

.menu ul li:nth-last-child(-n + 2) ul li ul.level1 {
  left: auto;

  right: 100%;
}

.menu ul li:nth-last-child(-n + 2) ul li.has-child > a::after {
  left: auto;

  right: 100%;
}

.bg--gioithieu {
  background: transparent;
}

/* ================trang giới thiệu================ */

/* giá trị cốt lõi */

.bg-gray2 {
  background-color: #fafafa;
}

/* Hiệu ứng lật icon quanh trục Y khi hover - chép từ assets_old/css/effects.css:360-383.

   Bộ assets mới (cached.css) không mang theo khối này nên .image-rotate trong

   templates/static/about_tpl.php ("Giá trị cốt lõi") và templates/index/index_tpl.php

   đang nằm trơ, không có hiệu ứng gì.

   Thuần CSS, không cần JS: grep assets_old/js/ không có chỗ nào đụng tới class này.

   Đã bỏ .whyus-list (không còn markup nào dùng) và .trin-trin (hiệu ứng khác, không

   liên quan, cũng không được dùng). Giữ lại .tieuchi-item vì

   templates/static/thumuaxe_tpl.php vẫn dùng và bản gốc gộp chung selector. */

.image-rotate {
  overflow: hidden;

  perspective: 1000px; /* tạo chiều sâu 3D cho trục Y */
}

.image-rotate img {
  transition: transform 0.5s ease;

  transform-style: preserve-3d; /* giữ hiệu ứng 3D khi xoay */
}

@keyframes continuousRotateY {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.tieuchi-item:hover img,
.image-rotate:hover img {
  animation: continuousRotateY 2s linear infinite;
}

.rounded-lg {
  border-radius: 10px;
}

/* hover giá trị cốt lõi */

.giatri-item h3 {
  /* 18 -> 20px */

  font-size: clamp(1.125rem, 1.03rem + 0.35vw, 1.25rem);

  transition:
    transform 0.4s ease,
    text-shadow 0.4s ease,
    color 0.4s ease;

  will-change: transform;
}

.giatri-item:hover h3 {
  color: var(--clr-brand-primary);

  transform: translate(-3px, -3px);

  text-shadow: 1px 1px 0 var(--clr-brand-primary);
}

.wrap-tamnhin .wrap-sumenh {
  transition:
    transform 0.4s ease,
    text-shadow 0.4s ease,
    color 0.4s ease;

  will-change: transform;
}

.wrap-tamnhin:hover h2 {
  color: var(--clr-brand-primary);

  transform: translate(-3px, -3px);

  text-shadow: 1px 1px 0 var(--clr-brand-primary);
}

.wrap-sumenh:hover h2 {
  color: var(--clr-brand-primary);

  transform: translate(-3px, -3px);

  text-shadow: 1px 1px 0 var(--clr-brand-primary);
}

.name-gioithieu {
  line-height: 1.5;
}

.mm-listview p {
  margin-bottom: 0;
}

.wrap-gioithieu .wrap-content {
  padding: 80px 0 40px 0;
}

@media (max-width: 765.98px) {
  .wrap-gioithieu .wrap-content {
    padding: 10px 0;
  }
}

.fs-16 {
  font-size: 16px;
}

/* ==================================================

   Trang lien he (templates/contact/contact_tpl.php)

   Port tu assets_old (style.css / base.css / fonts.css) - day la nhung class

   bundle theme moi khong crawl ve. Bien mau cua theme cu duoc doi sang token

   moi: --color-main o theme cu la #ffc800, nhung bundle moi dinh nghia lai

   --color-main = #2557ae (xanh) nen dung nguyen se lech tong; mau thuong hieu

   that la --clr-brand-primary (#e9aa2d).

   ================================================== */

/* base.css: tieu de trang */

.title-main-detail h2,
.title-main-detail .title {
  font-weight: bold;

  color: var(--clr-brand-primary);

  font-size: clamp(21px, 2vw, 28px);
}

.title-main-detail.has-line::after {
  content: "";

  display: inline-block;

  width: 50px;

  height: 2px;

  background-color: var(--clr-brand-primary);
}

/* fonts.css */

.text-md {
  font-size: 0.9rem !important;
}

/* --------------------------------------------------

   Khoi lien he - CHEP NGUYEN tu assets_old/css/style.css.

   Bundle cache co bo CSS contact RIENG cua no (form bo tron 30px + do bong,

   input gach chan cham cham xanh #045b8a, map cao 500px). style.css nap SAU

   bundle nen cac rule duoi day de len, tra ve dung giao dien cu.

   -------------------------------------------------- */

.contact-input,
.contact-map {
  position: relative;
}

.contact-article {
  margin-bottom: 1.5rem;
}

.contact-input {
  margin-bottom: 10px;
}

.contact-input input,
.contact-input textarea {
  border-radius: 0;

  border-top: none;

  border-left: none;

  border-right: none;
}

.contact-input input:focus,
.contact-input textarea:focus {
  box-shadow: none;

  outline: 0;
}

.contact-input textarea {
  resize: none;

  height: 150px;
}

.contact-input .custom-file-label::after {
  content: attr(title);
}

.contact-map {
  overflow: hidden;

  height: 350px;
}

.contact-map iframe {
  position: absolute;

  top: 0;

  left: 0;

  width: 100% !important;

  height: 100% !important;
}

/* style.css: o nhap kieu "label noi" */

.form-floating-cus > select,
.form-floating.form-floating-cus > input {
  height: 45px;

  padding: 0.7rem 0.5rem;
}

.form-floating.form-floating-cus > textarea {
  height: 100px;
}

.form-floating.form-floating-cus > label {
  padding: 10px 5px;

  /* theme cu dung var(--color-gray) (#6c757d) - token nay khong ton tai o

     theme moi, dung --clr-text-third (#858585) cho dung he mau hien tai */

  color: var(--clr-text-third);
}

/* Ba rule ben duoi KHONG co trong assets_old - chung la cua bundle cache va

   dang de len giao dien cu, nen phai trung hoa thi form moi ve dung ban cu:

     form.contact-form  -> cache cho bo tron 30px + do bong + max-width 800px

     .contact-text      -> cache cho bo tron 24px + vien + max-width 800px

     border-bottom      -> cache cho gach chan cham cham xanh #045b8a

   Xoa khoi nay di la quay lai kieu cua bundle cache. */

form.contact-form {
  box-shadow: none;

  border-radius: 0;

  max-width: none;

  padding: 0;

  margin: 0;

  background: transparent;
}

.contact-text {
  max-width: none;

  margin: 0 0 1.5rem;

  border: 0;

  border-radius: 0;

  padding: 0;

  background: transparent;
}

/* assets_old chi tat 3 canh, canh duoi de mac dinh cua Bootstrap .form-control */

.contact-input input,
.contact-input textarea {
  border-bottom: 1px solid #ced4da;
}

.contact-map {
  margin-top: 0;
}

/* Bundle theme co rule global `.loading { width:50px; height:50px; border:5px

   solid; border-radius:50%; animation: spin ... }` (vong tron xoay).

   vanilla-lazyload (assets/js/lazyload.min.js) tu them class "loading" vao moi

   phan tu .lazy trong luc tai -> anh bi bop thanh vong tron xoay.

   Chan rule do cho <img>/<source>; spinner chi danh cho div/overlay. */

img.loading,
img.loaded {
  width: auto;

  height: auto;

  max-width: 100%;

  border: 0;

  border-radius: inherit;

  -webkit-animation: none;

  -moz-animation: none;

  -o-animation: none;

  animation: none;
}

/* fix khoảng cách của trang sản phẩm */

@media (max-width: 991.98px) {
  .sort-select {
    margin: 10px 0;
  }
}

/* fix footer */
@media (max-width: 1024px) {
  body:has(.toolbar-custom, .toolbar) .footer__powered {
    padding-bottom: 3rem;
  }
}
@media (max-width: 1024px) {
  .pd\:60-0,
  .pd\:70-0,
  .pd\:80-0 {
    padding: 40px 0;
  }
}
@media (max-width: 566.98px) {
  .pd\:60-0,
  .pd\:70-0,
  .pd\:80-0 {
    padding: 20px 0;
  }
}
@media (max-width: 850px) {
  .news-right {
    margin-top: 10px;
  }
}

.navigation__content.ck-editor p {
  margin-bottom: 0;
}
.footer__content.ck-editor a {
  color: #ffffff;
  text-decoration: none;
}
.footer__content.ck-editor a:hover {
  color: #f1c40f;
}
/* fix phần btn ở form cách botom 1 tí */
.newsletter .newsletter__inner:after {
  bottom: -10px;
}

/* fix phần toc ở trang chi tiết tin tức */
#toc-content [id^="ftoc-heading-"] {
  scroll-margin-top: 110px;
}

@media (max-width: 375px) {
  .footer__copyright.rps-lg--w-100 {
    font-size: 12px;
  }
}

.box-readmore {
  margin-bottom: 0;
}

.news--detail .news__top {
  gap: 1rem 0;
}

/* fix phần trang sản phẩm */
@media (max-width: 566.98px) {
  .sort-select {
    margin: 5px 0;
  }
}

/* fix phần header menu */

/* fix header menu */
/* Vach ::before cua muc submenu rong 30px nhung link chi co padding-left 10px
   -> vach de len chu, trong nhu gach ngang. Chua cho cho no nam ben trai. */
.menu ul li ul li a {
  padding-left: 42px;
}

/* Theme ve vach do bang ::before cho ca :hover LAN .active
   (.menu ul li ul li a:hover:before, .menu ul li ul li > a.active:before).
   Chi giu vach cho :hover; muc dang xem van phan biet duoc bang mau chu
   va in dam san co. Dung :not(:hover) de khi ro chuot vao dung muc dang
   xem thi vach van chay binh thuong. */
.menu ul li ul li > a.active:not(:hover)::before {
  opacity: 0;
  visibility: hidden;
  width: 0;
}

/* fix section đối tác */
.partner .partner__title {
  margin-right: -1rem;
  font-size: clamp(20px, 4vw, 35px) !important;
}