/* ==========================================================================
   TÂN PHÁT — Lớp thiết kế cho trang bán hàng
   ==========================================================================

   Nạp SAU style.css. Cố tình để riêng một file thay vì sửa thẳng style.css:

   - style.css là theme mua sẵn, 1078 dòng, MỌI trang storefront đang dùng.
     Sửa thẳng vào đó là rủi ro lan sang trang mình chưa mở ra xem.
   - Để riêng thì gỡ ra chỉ cần bỏ một thẻ <link>, và toàn bộ phần thiết kế
     mới nằm gọn một chỗ để soát.

   Giữ nguyên màu xanh #2957a4 của logo TÂN PHÁT ETEK làm màu chủ đạo, chỉ
   dựng thêm dải đậm/nhạt quanh nó — trước đây cả trang chỉ có đúng một sắc
   xanh phẳng dùng cho mọi thứ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — khai báo lại cho ĐÚNG trọng lượng

   style.css khai báo 5 file Roboto nhưng KHÔNG file nào ghi font-weight, nên
   trình duyệt hiểu cả 5 đều là weight 400 và chỉ dùng file cuối cùng. Chữ đậm
   trên trang không phải Roboto Bold mà là chữ thường bị trình duyệt bôi đậm
   giả — nét bệt và mờ. Khai báo lại kèm font-weight để mỗi độ đậm lấy đúng file.
   -------------------------------------------------------------------------- */
@font-face{ font-family:"Roboto TP"; src:url("../fonts/Roboto-Light.ttf") format("truetype");   font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto TP"; src:url("../fonts/Roboto-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto TP"; src:url("../fonts/Roboto-Medium.ttf") format("truetype");  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto TP"; src:url("../fonts/Roboto-Bold.ttf") format("truetype");    font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto TP"; src:url("../fonts/Roboto-Italic.ttf") format("truetype");  font-weight:400; font-style:italic;  font-display:swap; }

/* --------------------------------------------------------------------------
   2. Bảng màu
   -------------------------------------------------------------------------- */
:root{
  --tp-xanh-900:#132c55;   /* menu chính, chân trang */
  --tp-xanh-800:#1b3d75;
  --tp-xanh-700:#1d418d;   /* hover của nút */
  --tp-xanh:#2957a4;       /* MÀU LOGO — nút, link, nhấn */
  --tp-xanh-300:#8aa6d4;
  --tp-xanh-100:#dde7f6;
  --tp-xanh-50:#eff4fb;    /* nền nhạt */

  --tp-do:#d93025;         /* giá bán và nhãn khuyến mãi */
  --tp-do-nhat:#fdecea;
  --tp-cam:#f26b21;        /* nút tìm kiếm ở thanh lọc xe */

  /* Xám lệch nhẹ về xanh cho ăn với màu thương hiệu, không dùng xám trung tính */
  --tp-nen:#f4f7fb;
  --tp-the:#ffffff;
  --tp-chu:#1b2430;
  --tp-chu-mo:#64748b;
  --tp-vien:#e2e8f2;

  --tp-bong:0 1px 2px rgba(19,44,85,.04), 0 4px 14px -8px rgba(19,44,85,.18);
  --tp-bong-noi:0 4px 10px rgba(19,44,85,.08), 0 18px 32px -20px rgba(19,44,85,.4);
  --tp-bo:10px;
}

/* --------------------------------------------------------------------------
   3. Nền tảng
   -------------------------------------------------------------------------- */
body{
  font-family:"Roboto TP", Roboto, "Segoe UI", system-ui, sans-serif;
  /* Theme để 1.2 — quá chật cho đoạn văn, chữ dính vào nhau khi xuống dòng */
  line-height:1.6;
  color:var(--tp-chu);
  background:var(--tp-nen);
}
.content{ background:var(--tp-nen); }

h1,h2,h3,h4,h5{ line-height:1.28; color:var(--tp-chu); }
a{ color:var(--tp-chu); transition:color .15s ease; }
a:hover{ color:var(--tp-xanh); }

:focus-visible{ outline:2px solid var(--tp-xanh); outline-offset:2px; border-radius:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* --------------------------------------------------------------------------
   4. Nút
   -------------------------------------------------------------------------- */
.btn{ border-radius:8px; font-weight:500; padding:9px 20px; transition:all .16s ease; }
.btn-primary{ background:var(--tp-xanh); border-color:var(--tp-xanh); }
.btn-primary:hover,.btn-primary:focus{
  background:var(--tp-xanh-700); border-color:var(--tp-xanh-700);
  transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(41,87,164,.7);
}
.btn-outline-primary{ color:var(--tp-xanh); border-color:var(--tp-xanh-300); background:#fff; }
.btn-outline-primary:hover{ background:var(--tp-xanh); border-color:var(--tp-xanh); color:#fff; }
.btn-sm{ padding:6px 14px; font-size:.875rem; }

/* --------------------------------------------------------------------------
   5. Đầu trang
   -------------------------------------------------------------------------- */
.header{
  background:var(--tp-the);
  border-bottom:0;
  /* Bóng đổ nhẹ: khi cuộn, đầu trang nằm ĐÈ lên nội dung nên cần một vạch
     tách, không thì chữ trong trang trôi lên chạm đáy menu trông như dính. */
  box-shadow:0 1px 0 var(--tp-vien), 0 6px 16px rgba(15,23,42,.06);
  z-index:1030;              /* trên thẻ sản phẩm, dưới modal của Bootstrap */

  /* Dính khi cuộn. Lề âm do script.js đo và gán (bằng chiều cao dải liên hệ
     + hàng logo) để hai phần đó trôi đi, chỉ ghim lại thanh lọc + menu.
     top:0 ở đây là mức dự phòng khi JS chưa chạy — dính cả cụm, xấu hơn
     nhưng không vỡ. */
  position:sticky;
  top:0;
}

.header .topbar{
  background:var(--tp-xanh-900);
  padding:7px 0;
  font-size:.875rem;
}
.header .topbar__left li a,
.header .topbar__right a{
  font-size:.875rem;
  color:rgba(255,255,255,.82);
  transition:color .15s ease;
}
.header .topbar__left li a:hover,
.header .topbar__right a:hover{ color:#fff; }
.header .topbar__right a{ margin-left:18px; }

.header .top-header{ padding-top:14px !important; padding-bottom:14px !important; }

/* Logo — theme đặt class .text-md-left của Bootstrap 4, mà bản đang dùng là
   Bootstrap 5 (tên mới là .text-md-start). Class không tồn tại nên .text-center
   thắng và logo bị đẩy vào giữa cột, cách mép trái container tới 127px.
   Đã sửa tên class trong master.php; dòng dưới chốt lại cho chắc. */
@media (min-width:768px){
  .header .header__logo{ text-align:left; }
}
.header .header__logo img{ max-height:46px; width:auto; }

/* Hotline + giỏ hàng gom về bên phải thành một cụm.
   Trước đây hotline nằm chỏng chơ ở giữa, cách giỏ hàng 616px toàn khoảng trống. */
.header .header__hotline a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--tp-chu); font-weight:500; white-space:nowrap;
}
.header .header__hotline .fa{
  width:34px; height:34px; border-radius:50%;
  background:var(--tp-xanh-50); color:var(--tp-xanh);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.header .header__hotline .nhan{
  display:block; font-size:.72rem; font-weight:400;
  color:var(--tp-chu-mo); text-transform:uppercase; letter-spacing:.06em;
}
.header .header__hotline .so{ display:block; font-size:1.02rem; font-weight:700; color:var(--tp-xanh); }

.header .header__cart a{
  gap:10px; color:var(--tp-chu); font-weight:500;
  padding:7px 14px; border-radius:9px; border:1px solid var(--tp-vien);
  transition:all .16s ease;
}
.header .header__cart a:hover{ border-color:var(--tp-xanh-300); background:var(--tp-xanh-50); }
.header .header__cart a .header__cart--item .fa{ font-size:1.3rem; color:var(--tp-xanh); }
/* Số trên giỏ: bản cũ 13px, hai chữ số là tràn ra ngoài vòng tròn */
.header .header__cart a .header__cart--item span.count{
  right:-9px; top:-7px;
  min-width:18px; height:18px; width:auto; padding:0 5px;
  background:var(--tp-do); border:2px solid #fff;
  border-radius:9px; font-size:.7rem; font-weight:700; line-height:15px;
}

/* --------------------------------------------------------------------------
   6. Menu chính
   -------------------------------------------------------------------------- */
.header .header__primary-menu{ background:var(--tp-xanh-900); }

/* Căn giữa dải menu.
   Gara có 7 mục, ở khổ 1440 chúng chỉ chiếm hơn nửa bề ngang rồi dồn hết về
   trái, chừa một mảng trống dài bên phải nhìn như menu bị thiếu.

   CHỈ áp từ 768px trở lên. Dưới mức đó .menu đổi thành flex-direction:column
   cho ngăn kéo trượt ra từ cạnh trái; justify-content lúc ấy tính theo trục
   DỌC, căn giữa là dồn hết các mục vào lưng chừng màn hình. */
@media (min-width:768px){
  .header .header__primary-menu .menu{
    justify-content:center;
    /* <ul> mặc định có padding-left 40px của trình duyệt. Không dẹp thì dải
       menu lệch sang phải đúng 20px sau khi căn giữa. */
    padding-left:0;
    margin-bottom:0;
  }
}

/* Khổ máy tính bảng (768–991px): khung chỉ rộng 720px mà dải menu cần 706px.
   Sát quá nên flex bóp các mục lại, chữ rớt xuống hàng thứ hai và dải menu
   cao 75px thay vì 50px. Lỗi này có sẵn từ trước, không phải do căn giữa —
   đã đo cả hai trạng thái đều ra 75px. Thu bớt padding hai bên là đủ.
   Gạch cam khi rê chuột cũng phải thu theo cho khớp mép chữ. */
@media (min-width:768px) and (max-width:991.98px){
  .header .header__primary-menu .menu > li > a{
    padding-left:12px; padding-right:12px;
    white-space:nowrap;
  }
  .header .header__primary-menu .menu > li > a::after{ left:12px; right:12px; }
}
.header .header__primary-menu .menu > li > a{
  padding:13px 20px; font-weight:500; font-size:.95rem;
  position:relative; color:rgba(255,255,255,.9);
}
/* Hover cũ là xám #9c9b9b — đục và chẳng liên quan gì tới màu thương hiệu */
.header .header__primary-menu .menu > li:hover > a,
.header .header__primary-menu .menu > li > a:focus-visible{
  background:rgba(255,255,255,.08); color:#fff;
}
.header .header__primary-menu .menu > li > a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:0;
  height:3px; background:var(--tp-cam);
  transform:scaleX(0); transform-origin:center; transition:transform .18s ease;
}
.header .header__primary-menu .menu > li:hover > a::after{ transform:scaleX(1); }

.header .header__primary-menu .menu li ul{
  background:#fff; min-width:250px; border-radius:0 0 var(--tp-bo) var(--tp-bo);
  box-shadow:var(--tp-bong-noi); padding:6px 0; overflow:hidden;
}
.header .header__primary-menu .menu li ul li a{
  color:var(--tp-chu); border-bottom:0; padding:9px 18px; font-size:.925rem;
}
.header .header__primary-menu .menu li ul li a:hover{ background:var(--tp-xanh-50); color:var(--tp-xanh); }
.header .header__primary-menu .menu li ul li i{ color:var(--tp-chu-mo); }

/* --------------------------------------------------------------------------
   6b. Thanh lọc xe — dải tra cứu

   Bản trước dùng nền xanh #eff4fb, gần như trùng với nền trang #f4f7fb, nên
   nhìn ra chẳng khác gì một khoảng trắng: không đọc thành "một dải" gì cả.
   Nay đổi hẳn sang nền xanh đậm của thương hiệu, các ô là thẻ trắng nổi lên
   trên. Tương phản trắng-trên-xanh-đậm là thứ mạnh nhất có thể làm mà vẫn
   nằm trong bảng màu sẵn có, không phải bịa thêm màu mới.

   Đậm hơn menu nhưng KHÔNG bằng menu: menu là #132c55 (gần như đen), dải này
   chạy #1d418d -> #2957a4. Hai sắc khác hẳn nhau nên xếp chồng vẫn thấy rõ
   đâu là menu, đâu là thanh lọc.

   Từng ô là một THẺ RỜI có bo góc riêng, không phải một khung liền như trước.
   Lý do rất thực tế: mở ô chọn ra, Chrome tự vẽ viền xanh quanh đúng ô đó —
   khung liền thì viền ấy cắt ngang mạch, nhìn như bị vỡ. Thẻ rời thì viền của
   trình duyệt trùng luôn với hình dáng cái thẻ, thành ra tự nhiên.
   -------------------------------------------------------------------------- */

/* Nhãn KHÔNG dính, thanh lọc thì có. Cuộn xuống là nhãn trôi lên khuất sau
   menu, còn thanh ở lại — đúng thứ khách cần khi đang xem hàng.
   Hai khối dùng CHUNG một nền để mắt đọc thành một dải liền. */
/* Màu PHẲNG, cố ý không dùng gradient. Nhãn và thanh lọc là hai thẻ tách rời
   nên muốn chạy chung một dải chuyển màu thì phải căn background-size theo
   tổng chiều cao của cả hai — mà chiều cao ấy đổi theo cỡ chữ, theo việc nhãn
   có xuống dòng hay không. Lệch một chút là lòi ra vạch đậm ngay chỗ giáp
   nhau. Một màu phẳng thì không bao giờ sai. */
.car-filter-nhan,
.car-filter{ background:var(--tp-xanh-800); }

.car-filter-nhan{
  border-top:3px solid var(--tp-cam);
  padding:14px 0 0;
}
.car-filter-nhan .container{
  display:flex; align-items:center; gap:10px;
  font-size:1rem; font-weight:600; color:#fff;
  letter-spacing:.005em;
}
.car-filter-nhan .fa{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem;
}

.car-filter{
  position:sticky;               /* top do script.js đo (= chiều cao menu xanh) */
  z-index:1020;                  /* trên nội dung, dưới đầu trang (1030) */
  border-bottom:0;
  /* Chiều cao KHÔNG ĐỔI dù ghim hay không. Đổi chiều cao của một thẻ dính là
     kéo tụt cả trang phía dưới ngay giữa lúc cuộn. */
  padding:12px 0 16px;
  box-shadow:0 10px 24px -12px rgba(19,44,85,.55);
}

/* Khung liền ngày trước giờ chỉ còn là cái khay xếp các thẻ. */
.car-filter__form{
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  gap:10px;
  align-items:center;
  overflow:visible;              /* khung gợi ý đổ xuống dưới, cắt là mất sạch */
}

.car-filter__select,
.car-filter__input{
  height:50px;
  border:1px solid transparent;
  border-radius:10px;
  background-color:#fff;
  color:var(--tp-chu);
  font-size:.94rem;
  box-shadow:0 1px 2px rgba(19,44,85,.18);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.car-filter__select{
  /* Mũi tên vẽ lại theo màu thương hiệu; bản gốc là xám #666, trên thẻ trắng
     nổi trên nền xanh thì xám nhìn bẩn. */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232957a4' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.car-filter__select:hover,
.car-filter__input:hover{ box-shadow:0 2px 6px rgba(19,44,85,.28); }

/* Quầng sáng trắng thay cho việc đổi nền. Chrome vẫn tự vẽ viền của nó khi ô
   chọn đang mở, nhưng viền ấy nằm trùng khít mép thẻ nên không phá gì. */
.car-filter__select:focus,
.car-filter__input:focus{
  background-color:#fff;
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 2px 8px rgba(19,44,85,.3);
}

.car-filter__btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 22px;
  background:var(--tp-cam);
  border-radius:10px;
  font-size:.95rem; font-weight:600;
  box-shadow:0 2px 8px rgba(242,107,33,.45);
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.car-filter__btn:hover,.car-filter__btn:focus{
  background:#d9551a;
  box-shadow:0 4px 14px rgba(242,107,33,.55);
}
.car-filter__btn:active{ transform:translateY(1px); }

/* Khung gợi ý nay là một tấm RỜI thả xuống dưới ô tìm, không còn dính liền
   vào đáy khung như hồi cả hàng là một khối. */
.car-filter__suggest{
  top:calc(100% + 6px);
  left:0; right:0;
  border:1px solid var(--tp-vien);
  border-radius:10px;
  box-shadow:var(--tp-bong-noi);
  overflow:hidden auto;
}
.cf-sug{ border-bottom-color:var(--tp-vien); }
.cf-sug.is-on{ background:var(--tp-xanh-50); }

@media (max-width:767.98px){
  /* Có gap rồi thì 50% là tràn. Trừ đi nửa khoảng cách cho vừa đúng hai cột. */
  .car-filter__select{
    flex:1 0 calc(50% - 5px);
    max-width:calc(50% - 5px);
    border-radius:10px;          /* thẻ rời nên bốn góc như nhau, không phải
                                    tính lại góc theo vị trí trong lưới nữa */
    border-bottom:1px solid transparent;
    border-right:1px solid transparent;
  }
  .car-filter__select--cat{ flex:1 0 100%; max-width:100%; }
  /* Chật chỗ thì nút chỉ còn kính lúp, bỏ chữ */
  .car-filter__btn{ padding:0 18px; }
  .car-filter__btn .chu{ display:none; }
}

/* --------------------------------------------------------------------------
   7. Tiêu đề khối

   Bản cũ: gạch ĐỎ 4px nằm dưới, đặt bottom:-5px nên đè lên nội dung phía dưới.
   Đỏ ở đây không mang nghĩa gì, lại đá với xanh thương hiệu — đỏ chỉ nên dành
   cho giá và nhãn khuyến mãi.
   -------------------------------------------------------------------------- */
.section-title{
  font-size:1.6rem; font-weight:700; letter-spacing:-.015em;
  margin-bottom:26px; padding-bottom:14px; color:var(--tp-chu);
}
.section-title::after{
  width:56px; height:3px; border-radius:2px;
  background:var(--tp-cam); bottom:0;
}

/* --------------------------------------------------------------------------
   8. Thẻ sản phẩm
   -------------------------------------------------------------------------- */
.products .products--item{
  border:1px solid var(--tp-vien);
  border-radius:var(--tp-bo);
  background:var(--tp-the);
  box-shadow:var(--tp-bong);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.products .products--item:hover{
  transform:translateY(-3px);
  box-shadow:var(--tp-bong-noi);
  border-color:var(--tp-xanh-100);
}
.products .products--item .item__image{ background:#fff; border-radius:var(--tp-bo) var(--tp-bo) 0 0; }
.products .products--item .item__image img{
  width:100%; height:200px; object-fit:contain; padding:12px;
}
.products .products--item .item__info{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }

/* Tên hàng: cắt đúng 2 dòng để mọi thẻ trong hàng cao bằng nhau.
   Bản cũ 1.3rem không giới hạn dòng nên tên dài đẩy thẻ cao lệch hẳn. */
.products .products--item .item__info .item--name{
  font-size:.975rem; font-weight:500; line-height:1.45; margin-bottom:10px;
  min-height:2.9em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.products .products--item .item__info .item--name a{ color:var(--tp-chu); }
.products .products--item .item__info .item--name a:hover{ color:var(--tp-xanh); }
.products .products--item .item__info h3 a:hover{ color:var(--tp-xanh); }

/* Giá: bản cũ dùng justify-content:space-between nên giá cũ và giá mới bị
   đẩy về hai mép thẻ, nhìn như hai thông tin rời nhau. */
.products .products--item .item__info .item--price{
  justify-content:flex-start; align-items:baseline; gap:9px;
  margin-top:auto; font-size:1rem;
}
.products .products--item .item__info .item--price span{
  color:var(--tp-do); font-weight:700; font-size:1.12rem;
}
.products .products--item .item__info .item--price del{ color:var(--tp-chu-mo); font-size:.875rem; font-weight:400; }

.products .products--item .item--sales{
  top:10px; right:10px;
  background:var(--tp-do); border-radius:6px;
  padding:3px 9px; font-size:.78rem; font-weight:700;
  box-shadow:0 2px 6px rgba(217,48,37,.35);
}

/* --------------------------------------------------------------------------
   9. Ô danh mục

   Bản cũ khai position:absolute rồi ngay dòng sau ghi đè position:relative cho
   cùng một phần tử — lớp phủ đen tính sai, tên danh mục không nằm trên ảnh như
   ý đồ ban đầu. Dựng lại cho đúng.
   -------------------------------------------------------------------------- */
.categories .categories__item{
  border-radius:var(--tp-bo); overflow:hidden;
  box-shadow:var(--tp-bong); background:var(--tp-the);
  transition:transform .18s ease, box-shadow .18s ease;
}
.categories .categories__item:hover{ transform:translateY(-3px); box-shadow:var(--tp-bong-noi); }
.categories .categories__item > a:first-child{ display:block; overflow:hidden; }
.categories .categories__item img{
  width:100%; height:170px; object-fit:cover;
  transition:transform .4s ease;
}
.categories .categories__item:hover img{ transform:scale(1.06); }
.categories .categories__item h2{
  position:static; background:transparent; color:var(--tp-chu);
  font-size:1rem; font-weight:600; text-align:center;
  padding:13px 12px; margin:0;
  border-top:1px solid var(--tp-vien);
}
.categories .categories__item:hover h2{ color:var(--tp-xanh); }
/* Lớp phủ đen của theme không còn dùng tới */
.categories .categories__item::after{ display:none; }

/* Căn giữa hàng danh mục.

   Lưới chia 4 cột mà gara chỉ có 3 nhóm (Phụ tùng / Thiết bị / Dịch vụ) nên ba
   ô bị dồn về trái, chừa hẳn một ô trống bên phải — nhìn như thiếu mất một cái.

   Chỉ áp cho khối danh mục, KHÔNG áp cho lưới sản phẩm: danh sách sản phẩm có
   phân trang, hàng cuối thường lẻ, căn giữa hàng lẻ đó là lưới gãy nhịp so với
   các hàng trên. Danh mục là một dãy trưng bày cố định nên căn giữa mới đúng. */
.categories .row{ justify-content:center; }

/* Dải tin tức cũng là khối trưng bày số lượng cố định (lấy 4 tin mới nhất), nên
   áp cùng luật. Hiện đủ 4 tin nên chưa thấy tác dụng gì — nhưng lúc chỉ đăng 3
   tin thì nó lệch y hệt khối danh mục. */
.posts .posts__list .row{ justify-content:center; }

/* --------------------------------------------------------------------------
   10. Thẻ tin tức
   -------------------------------------------------------------------------- */
.posts .posts__list .post--item{
  background:var(--tp-the); border:1px solid var(--tp-vien);
  border-radius:var(--tp-bo); overflow:hidden; height:100%;
  box-shadow:var(--tp-bong);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.posts .posts__list .post--item:hover{ transform:translateY(-3px); box-shadow:var(--tp-bong-noi); }
.posts .posts__list .post--item h3{
  font-size:1rem; font-weight:600; line-height:1.45;
  margin:14px 16px 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.posts .posts__list .post--item h3 a:hover{ color:var(--tp-xanh); }
.posts .posts__list .post--item time{
  color:var(--tp-chu-mo); font-size:.82rem; margin:0 16px 8px;
  display:flex; align-items:center; gap:6px;
}
.posts .posts__list .post--item p{
  color:var(--tp-chu-mo); font-size:.9rem; margin:0 16px 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* --------------------------------------------------------------------------
   11. Khoảng cách giữa các khối
   -------------------------------------------------------------------------- */
.categories, .products, .posts, .content > section{ padding-top:38px; padding-bottom:8px; }
.posts.pb-5{ padding-bottom:44px !important; }
.slider{ padding-top:0; }
.slider img{ width:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   12. Chân trang

   Bản cũ nền #838c9b — xám bùn, không dính dáng gì tới màu thương hiệu.
   -------------------------------------------------------------------------- */
.footer{ background:var(--tp-xanh-900); color:rgba(255,255,255,.78); }
.footer a{ color:rgba(255,255,255,.78); }
.footer a:hover{ color:#fff; }
.footer .footer__logo h2{ font-size:1.15rem; font-weight:600; color:#fff; margin-top:10px; }
.footer hr{ border-color:rgba(255,255,255,.14); opacity:1; }
/* CHÂN TRANG GARA TỰ SOẠN (tài liệu 05/11/2026, Frontend 7).
   Nội dung do gara gõ trong trình soạn thảo trên nền TRẮNG, nhưng in ra trên
   nền xanh đậm — nên phải ép màu chữ cho tiêu đề, bảng, trích dẫn, nếu không
   gara viết một tiêu đề là nó thành chữ đen trên nền xanh, coi như mất. */
.footer .footer__tu-soan{ font-size:.92rem; line-height:1.7; }
.footer .footer__tu-soan h1,
.footer .footer__tu-soan h2,
.footer .footer__tu-soan h3,
.footer .footer__tu-soan h4,
.footer .footer__tu-soan h5,
.footer .footer__tu-soan h6,
.footer .footer__tu-soan strong,
.footer .footer__tu-soan b{ color:#fff; }
.footer .footer__tu-soan h1,
.footer .footer__tu-soan h2{ font-size:1.15rem; font-weight:600; }
.footer .footer__tu-soan h3,
.footer .footer__tu-soan h4{ font-size:1rem; font-weight:600; }
.footer .footer__tu-soan p:last-child{ margin-bottom:0; }
.footer .footer__tu-soan img{ max-width:100%; height:auto; }
.footer .footer__tu-soan blockquote{
    border-left:3px solid rgba(255,255,255,.3); padding-left:.9rem;
    margin:.6rem 0; color:rgba(255,255,255,.7);
}
.footer .footer__tu-soan table{ width:100%; border-collapse:collapse; }
.footer .footer__tu-soan th,
.footer .footer__tu-soan td{ padding:5px 8px; border:1px solid rgba(255,255,255,.18); }
.footer .footer__address .footer__address--item h4{
  color:#fff; font-size:.92rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;
}
.footer .footer__address .footer__address--item h4 .fa{ color:var(--tp-cam); margin-right:6px; }
.footer .footer__address .footer__address--item p{ font-size:.92rem; line-height:1.7; }
.footer .footer__inner .footer__inner--menu ul li a{
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:8px 0; font-size:.92rem;
}
.footer .footer__inner .footer__inner--menu ul li a:hover{ padding-left:5px; }

/* --------------------------------------------------------------------------
   13. Nút lên đầu trang
   -------------------------------------------------------------------------- */
#button{ background-color:var(--tp-xanh) !important; border-radius:9px; }
#button:hover{ background-color:var(--tp-xanh-700) !important; }

/* --------------------------------------------------------------------------
   14. Màn hình nhỏ
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  /* Bỏ dính trên điện thoại: header cao chiếm mất phần lớn màn hình */
  .header{ position:static; }
  .section-title{ font-size:1.3rem; margin-bottom:20px; }
  .products .products--item .item__image img{ height:150px; }
  .products .products--item .item__info{ padding:11px 12px 13px; }
  .products .products--item .item__info .item--name{ font-size:.9rem; }
  .products .products--item .item__info .item--price span{ font-size:1rem; }
  .categories .categories__item img{ height:120px; }
  .categories .categories__item h2{ font-size:.9rem; padding:10px 8px; }
  .categories, .products, .posts, .content > section{ padding-top:26px; }
}

/* --------------------------------------------------------------------------
   14. Khối Video (trang chủ)

   Khung lớn bên trái + danh sách bên phải. Nguồn là thư viện ảnh/video có sẵn,
   không thêm bảng mới.
   -------------------------------------------------------------------------- */
.videos__khung{
  position:relative;
  /* aspect-ratio thay cho mẹo padding-top 56.25%: iframe con chỉ cần phủ kín,
     không phải position:absolute rồi căn bốn cạnh. */
  aspect-ratio:16/9;
  border-radius:var(--tp-bo);
  overflow:hidden;
  background:#000;
  box-shadow:var(--tp-bong-noi);
}
.videos__khung iframe{ width:100%; height:100%; border:0; display:block; }

.videos__ds{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
  /* Cao bằng đúng khung video bên trái rồi cuộn trong lòng nó — thêm video thứ
     sáu, thứ bảy cũng không kéo dài trang ra. */
  max-height:calc((100vw - 40px) * 0.5625);
  overflow-y:auto;
}
@media (min-width:992px){
  /* Cột phải rộng 5/12, cột trái 7/12 -> chiều cao khung trái tính theo phần
     bề ngang mà nó chiếm. */
  .videos__ds{ max-height:calc((100% + 0px)); height:100%; }
  .videos .row{ align-items:stretch; }
}

.videos__muc{
  display:flex; align-items:flex-start; gap:12px;
  width:100%; text-align:left;
  padding:8px; border:1px solid transparent; border-radius:10px;
  background:transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.videos__muc:hover{ background:var(--tp-xanh-50); }
.videos__muc.dang-xem{
  background:var(--tp-xanh-50);
  border-color:var(--tp-xanh-300);
}

.videos__anh{
  position:relative; flex:0 0 128px; width:128px;
  aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000;
}
.videos__anh img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Nút play chìm trên ảnh — để nhìn là biết đây là video chứ không phải ảnh tĩnh */
.videos__anh .fa{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; padding-left:2px;
}
.videos__muc.dang-xem .videos__anh .fa{ background:var(--tp-do); }

.videos__ten{
  flex:1; min-width:0;
  font-size:.94rem; line-height:1.45; font-weight:500; color:var(--tp-chu);
  /* Cắt ở dòng thứ ba: tên video dài không được đẩy các mục khác lệch nhịp */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.videos__muc.dang-xem .videos__ten{ color:var(--tp-xanh); }

@media (max-width:991.98px){
  /* Xuống một cột thì danh sách nằm dưới khung video, cho cuộn gọn lại */
  .videos__ds{ max-height:340px; margin-top:16px; }
}

/* ==========================================================================
   HỖ TRỢ TRỰC TUYẾN — ba nút tròn nổi góc trái dưới.
   Tài liệu khách 05/11/2026, Frontend mục 9: "Cho hiệu ứng nháy nháy".

   GÓC TRÁI, không phải góc phải: góc phải đã có khung chat onsite và nút
   "lên đầu trang". Ba nút nữa chồng lên là che mất cả hai.

   Vòng sóng lan ra là phần "nháy nháy". Dừng lại khi hệ điều hành báo người
   dùng không muốn chuyển động (prefers-reduced-motion) — với một số người,
   thứ nhấp nháy liên tục ở mép mắt gây chóng mặt hoặc co giật.
   ========================================================================== */
.ho-tro-noi {
    position: fixed;
    left: 16px;
    bottom: 18px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ho-tro-noi__nut {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.ho-tro-noi__nut:hover,
.ho-tro-noi__nut:focus { color: #fff; text-decoration: none; transform: scale(1.06); }
.ho-tro-noi__chu { font-size: 14px; letter-spacing: .3px; }
.ho-tro-noi .la-zalo { background: #0068ff; }
.ho-tro-noi .la-goi  { background: #22a447; }
.ho-tro-noi .la-mess { background: #a033ff; }

/* Vòng sóng — nằm DƯỚI nội dung nút (z-index âm) để không nuốt cú bấm. */
.ho-tro-noi__song {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: .55;
    z-index: -1;
    animation: ho-tro-song 1.8s ease-out infinite;
}
@keyframes ho-tro-song {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ho-tro-noi__song { animation: none; opacity: 0; }
    .ho-tro-noi__nut:hover { transform: none; }
}

/* Màn hẹp: nhỏ lại và nhích lên cho khỏi đè thanh điều hướng dưới cùng */
@media (max-width: 575.98px) {
    .ho-tro-noi { left: 10px; bottom: 12px; gap: 9px; }
    .ho-tro-noi__nut { width: 42px; height: 42px; font-size: 17px; }
    .ho-tro-noi__chu { font-size: 12px; }
}