/* ==========================================================================
   TECHSPACE — lớp giao diện đè lên theme Sudes Phone
   Bản v6 — 01/09/2026
   --------------------------------------------------------------------------
   Asset: techspace.css
   Nhúng trong theme.bwt, ngay trên </head>:
       {{ 'techspace.css' | asset_url | stylesheet_tag }}

   KIẾN TRÚC
   Các khối tự viết dùng snippet ts_section + ts_card với class tiền tố ts-.
   Theme không có luật nào cho những class này nên PHẦN A không cần !important.

   PHẦN B đè lên CSS sẵn có của theme, mà theme nạp CSS bằng JavaScript sau
   khi trang tải xong, nên bắt buộc dùng html + !important.

   ĐỔI SO VỚI BẢN v5
   - Xếp lại các mục theo đúng thứ tự mục lục. Bản cũ bị dán nối đuôi nên
     A11-A13 nằm trước A5-A9, rất khó tìm.
   - Bỏ hai dòng ghi chú Liquid lọt vào giữa file (đoạn include header/footer).
     Trình duyệt đọc đó là CSS hỏng và nuốt luôn luật ngay sau nó.
   - Bỏ một dấu } thừa trong mục A5, dựng lại luật nền .ts-mega bị mất.
   - A10 cũ đổi thành B11 vì nội dung là đè lên theme, không thuộc phần A.
   - Mục mobile của phần theme chuyển thành B12 và giữ ở cuối file.
   - Gộp các luật cột lọc trùng nhau về một chỗ trong B5.
   - Bỏ các luật .ts-col vì collection.bwt không còn dùng bộ class đó.

   MỤC LỤC
     PHẦN A — thành phần tự viết, không cần !important
       A1.  Biến
       A2.  Khối sản phẩm   (ts_section)
       A3.  Thẻ sản phẩm    (ts_card)
       A4.  Biến thể khối: deal / lowstock / preorder / lego
       A5.  Header          (ts_header)
       A6.  Footer          (ts_footer)
       A7.  Hero            (ts_hero)
       A8.  Dải cam kết     (ts_trust)
       A9.  Danh mục nổi bật (ts_categories)
       A11. Đại lý chính thức (ts_brands)
       A12. Video review    (ts_choice)
       A13. Góc công nghệ   (ts_blog)
       A14. Trang danh mục — dải navy, mô tả, chip lọc, banner dọc
       (không còn A10, xem B11)
     PHẦN B — đè lên theme
       B1.  Nền tảng và chữ
       B2.  Nút
       B3.  Header của theme
       B4.  Tiêu đề các khối còn lại của theme
       B5.  Trang danh mục — cột lọc, thanh sắp xếp, thẻ sản phẩm
       B6.  Trang sản phẩm
       B7.  Blog và bài viết
       B8.  Trang tài khoản
       B9.  Footer của theme
       B10. Thành phần dùng chung
       B11. Chuẩn màu các khối còn lại của theme
       B12. Mobile cho phần theme — luôn để cuối file
   ========================================================================== */


/* ==========================================================================
   A1. BIẾN
   ========================================================================== */
:root{
  --ts-bg:#FFFFFF;  --ts-bg-alt:#F4F6F9;  --ts-bg-warn:#FFF8ED;
  --ts-line:#E3E6EC; --ts-line-soft:#EDF0F4;
  --ts-text:#0F1729; --ts-text-mid:#3D4759; --ts-text-soft:#5A6478; --ts-text-faint:#8A93A6;
  --ts-accent:#2563EB; --ts-accent-ink:#FFFFFF; --ts-accent-text:#1D4ED8;
  --ts-accent-soft:#E8EFFD; --ts-accent-lite:#5B9BFF;
  --ts-sale:#DC2626; --ts-sale-ink:#FFFFFF; --ts-sale-soft:#FDECEC;
  --ts-dark:#0F1729; --ts-dark-2:#1B2438; --ts-dark-3:#2A3550; --ts-dark-text:#A9B4C9;
  --ts-lego-bg:#FFF4D6; --ts-lego-line:#E8B923; --ts-lego-card:#FDF6E3;
  --ts-lego-border:#EBD9A0; --ts-lego-ink:#412402; --ts-lego-text:#7A5A18;
  --ts-ok:#0F7A5A; --ts-ok-soft:#E7F5F0; --ts-warn:#92610C; --ts-warn-soft:#FDF3E0;
  --ts-danger:#B02B2B; --ts-danger-soft:#FCEDED;
  --ts-chip-bg:#EDF1F8; --ts-chip-text:#3D5580;
  --ts-r-sm:6px; --ts-r-md:10px; --ts-r-lg:14px;
  --ts-font:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}


/* ==========================================================================
   A2. KHỐI SẢN PHẨM  (ts_section)
   ========================================================================== */
.ts-section{
  padding:30px 0;
  font-family:var(--ts-font);
}

.ts-section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.ts-section__left{ min-width:0; }
.ts-section__title{
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  color:var(--ts-text);
  margin:0;
}
.ts-section__note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--ts-text-faint);
  margin:4px 0 0;
}
.ts-section__right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  margin-top:3px;
}
.ts-section__more{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:12.5px;
  color:var(--ts-accent-text);
  white-space:nowrap;
}
.ts-section__more:hover{ color:var(--ts-accent-text); text-decoration:underline; }
.ts-section__terms{
  font-size:11.5px;
  line-height:1.7;
  color:var(--ts-text-faint);
  margin:6px 0 0;
  max-width:70ch;
}

.ts-countdown{
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:12.5px;
  font-weight:500;
  background:var(--ts-accent-soft);
  color:var(--ts-accent-text);
  padding:4px 10px;
  border-radius:var(--ts-r-sm);
  white-space:nowrap;
}
.ts-countdown[data-expired="true"]{
  background:var(--ts-bg-alt);
  color:var(--ts-text-faint);
}

/* lưới: 2 cột mobile → 3 tablet → 5 desktop, không hàng nào hụt */
.ts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:start;
}
@media (min-width:768px){
  .ts-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
}
@media (min-width:992px){
  .ts-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  /* nguồn có 6 sản phẩm, desktop chỉ hiện 5 cho đủ một hàng */
  .ts-grid > *:nth-child(n+6){ display:none; }
}
/* ts-autoslide: lưới có hơn 5 sản phẩm thành băng trượt (script ở cuối theme.bwt) */
.ts-grid.ts-slide--on, .ts-prow.ts-slide--on{ display:block; position:relative; }
.ts-slide__sw{ overflow:hidden; }
.ts-slide .swiper-slide{ height:auto; display:flex; }
.ts-slide .swiper-slide > *{ width:100%; }
.ts-slide__nav{
  position:absolute; top:38%; z-index:3;
  display:grid; place-items:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--ts-line); border-radius:50%;
  background:#fff; color:var(--ts-text);
  box-shadow:0 2px 8px rgba(15,23,41,.12);
  cursor:pointer;
}
.ts-slide__nav:hover{ color:var(--ts-accent-text); border-color:var(--ts-accent); }
.ts-slide__prev{ left:-14px; }
.ts-slide__next{ right:-14px; }
.ts-slide__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
@media (max-width:767px){ .ts-slide__nav{ display:none; } }


/* ==========================================================================
   A3. THẺ SẢN PHẨM  (ts_card)
   ========================================================================== */
.ts-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-lg);
  overflow:hidden;
  margin:0;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-card:hover{ border-color:#CBD2DE; transform:translateY(-2px); }
.ts-card--out{ opacity:.72; }

.ts-card__media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/1;
  background:var(--ts-bg-alt);
  overflow:hidden;
}
.ts-card__media img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.ts-card__badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  font-size:10.5px;
  font-weight:600;
  line-height:1.5;
  padding:3px 8px;
  border-radius:5px;
  pointer-events:none;
}
.ts-card__badge--sale{ background:var(--ts-sale); color:var(--ts-sale-ink); }
.ts-card__badge--out{ background:var(--ts-bg-alt); color:var(--ts-text-faint); }
.ts-card__badge--alert{ background:var(--ts-danger-soft); color:var(--ts-danger); }

.ts-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:11px 12px 13px;
}
.ts-card__brand{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ts-card__name{
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  margin:0 0 8px;
  min-height:2.9em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-card__name a{ color:var(--ts-text); }
.ts-card__name a:hover{ color:var(--ts-accent-text); }

.ts-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:9px;
}
.ts-card__chips span{
  background:var(--ts-chip-bg);
  color:var(--ts-chip-text);
  font-size:10px;
  font-weight:500;
  line-height:1.5;
  padding:3px 7px;
  border-radius:4px;
  white-space:nowrap;
}

.ts-card__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
}
.ts-card__price{
  font-size:14.5px;
  font-weight:500;
  color:var(--ts-text);
  white-space:nowrap;
}
.ts-card__price--sale{ color:var(--ts-sale); }
.ts-card__was{
  font-size:11.5px;
  color:#9AA3B4;
  text-decoration:line-through;
  white-space:nowrap;
}
.ts-card__cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border:0;
  border-radius:var(--ts-r-sm);
  background:var(--ts-accent-soft);
  color:var(--ts-accent-text);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.ts-card__cart:hover{ background:var(--ts-accent); color:#fff; }
.ts-card__note{
  font-size:11px;
  line-height:1.5;
  color:var(--ts-warn);
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--ts-line-soft);
}


/* ==========================================================================
   A4. BIẾN THỂ KHỐI
   ========================================================================== */

/* --- Deal shock: nền trắng, chỉ đếm ngược nổi màu --- */
.ts-section--deal{
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
}

/* --- Sắp cháy hàng: nền trắng, chỉ nhãn trên thẻ mới đỏ --- */
.ts-section--lowstock{
  background:#fff;
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
}

/* --- Đặt trước: nền kem rất nhạt --- */
.ts-section--preorder{ background:var(--ts-bg-warn); }
.ts-section--preorder .ts-section__note{ color:var(--ts-warn); font-weight:500; }
.ts-section--preorder .ts-section__more{ color:var(--ts-warn); }
.ts-card--preorder .ts-card__badge--alert{
  background:var(--ts-warn-soft);
  color:var(--ts-warn);
}

/* --- LEGO: băng vàng, hàng bốn chấm stud --- */
.ts-section--lego{
  background:var(--ts-lego-bg);
  border-top:3px solid var(--ts-lego-line);
  padding:32px 0;
}
.ts-section--lego .ts-section__left{ position:relative; padding-top:34px; }
.ts-section--lego .ts-section__left::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:112px;
  height:22px;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 11px at 11px 11px,  #E8B923 98%, transparent 100%),
    radial-gradient(circle 11px at 41px 11px,  #D64545 98%, transparent 100%),
    radial-gradient(circle 11px at 71px 11px,  #2B6CB0 98%, transparent 100%),
    radial-gradient(circle 11px at 101px 11px, #3B8A4E 98%, transparent 100%);
}
.ts-section--lego .ts-section__title{ color:var(--ts-lego-ink); }
.ts-section--lego .ts-section__note{ color:var(--ts-lego-text); }
.ts-section--lego .ts-section__more{ color:var(--ts-warn); }
.ts-section--lego .ts-section__right{ margin-top:37px; }
.ts-card--lego{ border-color:var(--ts-lego-border); }
.ts-card--lego:hover{ border-color:var(--ts-lego-line); }
.ts-card--lego .ts-card__media{ background:var(--ts-lego-card); }

@media (min-width:1024px){
  .ts-section__title{ font-size:22px; }
}
@media (max-width:767px){
  .ts-section{ padding:22px 0; }
  .ts-section--lego{ padding:24px 0; }
  .ts-section__title{ font-size:17px; }
  .ts-section__right{ gap:8px; }
  .ts-section__more{ font-size:11.5px; }
  .ts-countdown{ font-size:11px; padding:3px 7px; }
  .ts-card__body{ padding:9px 10px 11px; }
  .ts-card__brand{ font-size:9.5px; }
  .ts-card__name{ font-size:12px; }
  .ts-card__price{ font-size:13px; }
  .ts-card__chips span{ font-size:9px; padding:2px 5px; }
  .ts-card__cart{ width:28px; height:28px; }
  .ts-section--lego .ts-section__left{ padding-top:26px; }
  .ts-section--lego .ts-section__right{ margin-top:29px; }
  .ts-section--lego .ts-section__left::before{
    width:76px; height:14px;
    background-image:
      radial-gradient(circle 7px at 7px 7px,  #E8B923 98%, transparent 100%),
      radial-gradient(circle 7px at 28px 7px, #D64545 98%, transparent 100%),
      radial-gradient(circle 7px at 49px 7px, #2B6CB0 98%, transparent 100%),
      radial-gradient(circle 7px at 70px 7px, #3B8A4E 98%, transparent 100%);
  }
}


/* ==========================================================================
   A5. HEADER  (ts_header)
   ========================================================================== */
.ts-hdr__main{ background:#fff; border-bottom:1px solid var(--ts-line); }
.ts-hdr__row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0;
  min-height:64px;
}
@media (min-width:1024px){
  /* Nới khoảng cách sau logo. Trước đó logo và ô tìm kiếm chỉ cách nhau 16px
     trong khi các mục bên phải cách nhau 20px, nhìn bị dồn về bên trái. */
  .ts-hdr__row{ gap:24px; }
}
.ts-hdr__burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  flex-shrink:0;
  border:0;
  border-radius:var(--ts-r-sm);
  background:var(--ts-bg-alt);
  color:var(--ts-text);
  cursor:pointer;
}
.ts-hdr__logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  font-size:17px;
  font-weight:600;
  letter-spacing:1.2px;
  color:var(--ts-text);
  white-space:nowrap;
  line-height:1;
}
.ts-hdr__logo img{
  display:block;
  max-height:38px;
  max-width:220px;
  width:auto;
  height:auto;
}
/* KHÔNG đặt khoảng đệm riêng cho khung chứa của header.
   Theme dùng .container chuẩn của bootstrap với đệm 15px. Đặt 16px rồi 24px ở
   đây làm logo và hàng menu thụt vào trong so với đường dẫn, tiêu đề và mọi
   nội dung khác bên dưới — nhìn cả trang bị lệch trục trái. */
/* Khung bọc ô tìm kiếm — mốc định vị cho bảng gợi ý xổ xuống */
.ts-hdr__sbox{ position:relative; flex:1 1 0; min-width:0; }
/* Điện thoại: ô tìm kiếm xuống hàng riêng, rộng hết màn hình. Trước đây nó chen
   cùng hàng với nút menu, logo và giỏ nên bị bóp còn khoảng 28px. */
@media (max-width:767px){
  .ts-hdr__row{ flex-wrap:wrap; row-gap:10px; padding:10px 0 12px; }
  .ts-hdr__sbox{ order:5; flex:1 0 100%; }
}
/* Trang sản phẩm: điểm mạnh luôn nằm ở cột phải, sau các nút mua và thanh toán.
   Trước đây trên máy tính nó nằm dưới ảnh ở cột trái, làm cột trái dài hơn cột phải ~220px
   và để một khoảng trắng lớn dưới nút thanh toán khi sản phẩm không có băng hot deal. */
.product-detail-left .ts-ksp{ display:none; }
.ts-ksp--m{ display:block; margin-top:16px; }
/* Máy tính: khối ảnh bên trái dính theo khi cuộn (header không dính nên cách đỉnh 16px).
   Cột phải dài ngắn khác nhau theo từng sản phẩm (có hay không băng hot deal, số dòng điểm mạnh),
   ảnh đi theo nên không còn lộ khoảng trắng dưới cột ngắn hơn. */
@media (min-width:768px){
  .details-product .product-detail-left{ position:sticky; top:16px; align-self:flex-start; }
}

.ts-hdr__search{
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  background:var(--ts-bg-alt);
  border:1px solid transparent;
  border-radius:var(--ts-r-sm);
  overflow:hidden;
  transition:border-color .15s ease, background-color .15s ease;
}
.ts-hdr__search:focus-within{ background:#fff; border-color:var(--ts-accent); }
.ts-hdr__search input,
.ts-hdr__search input[type="text"]{
  flex:1;
  min-width:0;
  width:100%;
  height:42px;
  margin:0;
  padding:0 14px;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:none !important;
  color:var(--ts-text);
  font-family:inherit;
  font-size:13.5px;
  line-height:42px;
  border-radius:0 !important;
  -webkit-appearance:none;
  appearance:none;
}
.ts-hdr__search input:focus,
.ts-hdr__search input[type="text"]:focus{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:none !important;
}
.ts-hdr__search input::placeholder{ color:var(--ts-text-faint); }
.ts-hdr__search button{
  width:42px;
  height:42px;
  flex-shrink:0;
  border:0;
  background:none;
  color:var(--ts-text-faint);
  cursor:pointer;
}

/* Đẩy cụm công cụ sát mép phải. Không có margin-left:auto thì nó dính ngay
   sau ô tìm kiếm và cả hàng trông lệch về bên trái. */
.ts-hdr__tools{ display:flex; align-items:center; gap:20px; flex:0 0 auto; margin-left:auto; }
.ts-hdr__tool{ display:none; align-items:center; gap:8px; color:var(--ts-text); }
.ts-hdr__tool svg{ color:var(--ts-accent-text); flex-shrink:0; }
.ts-hdr__tool span{ display:flex; flex-direction:column; font-size:11px; color:var(--ts-text-faint); line-height:1.35; }
.ts-hdr__tool b{ font-size:12.5px; font-weight:500; color:var(--ts-text); }

.ts-hdr__cart{ position:relative; display:inline-flex; color:var(--ts-text); padding:4px; }
.ts-hdr__cart .count_item{
  position:absolute;
  top:-3px; right:-6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--ts-sale);
  color:var(--ts-sale-ink);
  font-size:10.5px;
  font-weight:600;
  line-height:18px;
  text-align:center;
}

/* --- bảng gợi ý tìm kiếm --- */
.ts-sug{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:60;
  max-height:min(420px, 70vh);
  overflow-y:auto;
  padding:6px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,41,.12);
}
.ts-sug[hidden]{ display:none; }
.ts-sug__row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px;
  border-radius:var(--ts-r-sm);
}
.ts-sug__row:hover{ background:var(--ts-bg-alt); }
.ts-sug__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  overflow:hidden;
  border-radius:var(--ts-r-sm);
  background:var(--ts-bg-alt);
}
.ts-sug__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ts-sug__b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ts-sug__n{
  font-size:13px;
  line-height:1.4;
  color:var(--ts-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-sug__p{ font-size:13px; font-weight:500; color:var(--ts-accent-text); }
.ts-sug__none{ padding:14px 10px; font-size:13px; color:var(--ts-text-soft); }
.ts-sug__all{
  display:block;
  margin-top:4px;
  padding:10px;
  border-top:1px solid var(--ts-line-soft);
  font-size:12.5px;
  color:var(--ts-accent-text);
  text-align:center;
}
.ts-sug__all:hover{ background:var(--ts-bg-alt); color:var(--ts-accent-text); }

/* --- thanh menu + mega --- */
.ts-hdr__nav{ display:none; background:var(--ts-dark); }
.ts-nav{ display:flex; gap:24px; margin:0; padding:0; list-style:none; }
.ts-nav__item{ position:relative; }
.ts-nav__item > a{
  display:flex;
  align-items:center;
  gap:4px;
  padding:12px 0;
  font-size:13.5px;
  color:var(--ts-dark-text);
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.ts-nav__item > a:hover,
.ts-nav__item > a.on{ color:#fff; border-bottom-color:var(--ts-accent-lite); }
.ts-nav__item:last-child > a{ color:#FFB088; }
.ts-nav__item:last-child > a:hover{ color:#FFC9AC; }

/* LƯU Ý: luật nền của .ts-mega bị mất trong bản v5 — chỉ còn dòng bật
   display:grid mà không có khung, nền, vị trí. Đoạn dưới là bản dựng lại.
   Nếu mega menu trông khác trước, sửa ngay tại đây. */
.ts-mega{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:40;
  min-width:640px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  padding:20px 24px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  box-shadow:0 12px 28px rgba(15,23,41,.10);
}
.ts-nav__item.is-open .ts-mega,
.ts-nav__item:focus-within .ts-mega{ display:grid; }
.ts-mega__col h4{
  margin:0 0 10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ts-accent-text);
}
.ts-mega__col ul{ margin:0; padding:0; list-style:none; }
.ts-mega__col li{ margin-bottom:7px; }
.ts-mega__col a{ font-size:13px; color:var(--ts-text-mid); }
.ts-mega__col a:hover{ color:var(--ts-accent-text); }

@media (min-width:1024px){
  .ts-hdr__burger{ display:none; }
  .ts-hdr__tool{ display:flex; }
  .ts-hdr__nav{ display:block; }
  /* KHÔNG chặn bề ngang ô tìm kiếm. Chặn thì phần dư biến thành khoảng trống
     giữa ô tìm kiếm và cụm công cụ, cả hàng trông rỗng ở giữa. Để nó tự giãn
     lấp hết chỗ còn lại giữa logo và cụm công cụ. */
  .ts-hdr__sbox{ max-width:none; }
}

/* --- ngăn kéo mobile --- */
.ts-drawer{ position:fixed; inset:0; z-index:100; }
.ts-drawer__veil{ position:absolute; inset:0; background:rgba(15,23,41,.45); }
.ts-drawer__panel{
  position:absolute;
  top:0; left:0; bottom:0;
  width:min(84vw, 320px);
  background:#fff;
  overflow-y:auto;
  z-index:2;
}
.ts-drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--ts-line);
  font-size:13px;
  font-weight:500;
}
.ts-drawer__top button{ border:0; background:none; color:var(--ts-text-faint); cursor:pointer; }
.ts-drawer__list{ margin:0; padding:0; list-style:none; }
.ts-drawer__list > li{ border-bottom:1px solid var(--ts-line-soft); }
.ts-drawer__list > li > a{
  display:block;
  padding:13px 16px;
  font-size:14px;
  font-weight:500;
  color:var(--ts-text);
}
.ts-drawer__list ul{ margin:0; padding:0 0 10px; list-style:none; }
.ts-drawer__list ul a{
  display:block;
  padding:7px 16px 7px 28px;
  font-size:13px;
  color:var(--ts-text-soft);
}


/* ==========================================================================
   A6. FOOTER  (ts_footer)
   ========================================================================== */
.ts-foot{
  background:var(--ts-bg-alt);
  border-top:1px solid var(--ts-line);
  font-family:var(--ts-font);
}
.ts-foot__grid{ padding:26px 0 20px; }
.ts-foot__logo{
  display:inline-block;
  margin-bottom:9px;
  font-size:17px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--ts-text);
}
.ts-foot__logo img{
  display:block;
  max-height:40px;
  max-width:220px;
  width:auto;
  height:auto;
}
.ts-foot__intro{
  font-size:13px;
  line-height:1.7;
  color:var(--ts-text-soft);
  margin:0 0 16px;
  max-width:52ch;
}
.ts-shop{
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  padding:13px;
  margin-bottom:10px;
}
.ts-shop__k{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ts-accent-text);
  margin-bottom:6px;
}
.ts-shop__a{ font-size:13px; line-height:1.6; color:var(--ts-text); }
.ts-shop__t{ display:flex; gap:8px; margin-top:8px; }
.ts-shop__t span,
.ts-shop__t a{
  background:var(--ts-bg-alt);
  color:var(--ts-text-mid);
  font-size:11px;
  padding:5px 10px;
  border-radius:var(--ts-r-sm);
}
.ts-shop__t a:hover{ color:var(--ts-accent-text); }
.ts-foot__contact{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:13px; }
.ts-foot__contact a{ color:var(--ts-text); font-weight:500; }

.ts-fold{ border-top:1px solid var(--ts-line); }
.ts-fold summary{
  list-style:none;
  cursor:pointer;
  padding:14px 0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ts-fold summary::-webkit-details-marker{ display:none; }
.ts-fold summary::after{ content:'+'; color:var(--ts-text-faint); font-weight:400; font-size:17px; }
.ts-fold[open] summary::after{ content:'–'; }
.ts-fold > div{ padding-bottom:14px; }
.ts-fold a{ display:block; padding:5px 0; font-size:13px; color:var(--ts-text-soft); }
.ts-fold a:hover{ color:var(--ts-accent-text); }

.ts-social{ display:flex; flex-direction:column; }
.ts-pay{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ts-pay span{
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-sm);
  padding:6px 10px;
  font-size:10.5px;
  color:var(--ts-text-mid);
}

.ts-legal{ background:#fff; border-top:1px solid var(--ts-line); padding:16px 0; }
.ts-legal .container{ display:flex; gap:14px; align-items:flex-start; }
.ts-legal__badge{
  width:58px; height:58px;
  flex-shrink:0;
  background:#EAF3FB;
  border:1px solid #CFE2F3;
  border-radius:var(--ts-r-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:9px;
  line-height:1.3;
  color:#1F6FB2;
}
.ts-legal__text{ font-size:11.5px; line-height:1.85; color:var(--ts-text-soft); }
.ts-legal__text strong{ color:var(--ts-text); font-weight:500; }

.ts-copy{
  padding:14px 0;
  text-align:center;
  font-size:11.5px;
  color:var(--ts-text-faint);
  border-top:1px solid var(--ts-line);
}

@media (min-width:1024px){
  .ts-foot__grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.1fr;
    gap:36px;
    padding:44px 0 32px;
  }
  .ts-fold{ border-top:0; }
  .ts-fold summary{ padding:0 0 12px; pointer-events:none; }
  .ts-fold summary::after{ display:none; }
  .ts-fold > div{ padding:0; }
}


/* ==========================================================================
   A7. HERO  (ts_hero)
   ========================================================================== */
.ts-hero{ padding:16px 0 0; font-family:var(--ts-font); }
.ts-hero__row{ display:grid; grid-template-columns:1fr; gap:12px; }

.ts-hero__main{
  position:relative;
  border-radius:var(--ts-r-lg);
  overflow:hidden;
  background:var(--ts-bg-alt);
  aspect-ratio:83/34; /* khớp banner 1660x680 */
}
.ts-hero__track{ position:absolute; inset:0; }
.ts-hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease;
}
.ts-hero__slide.is-on{ opacity:1; visibility:visible; }
.ts-hero__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.ts-hero__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  display:none;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--ts-text);
  cursor:pointer;
  z-index:3;
  transition:background-color .15s ease;
}
.ts-hero__arrow:hover{ background:#fff; }
.ts-hero__arrow--prev{ left:12px; }
.ts-hero__arrow--next{ right:12px; }
.ts-hero__main:hover .ts-hero__arrow{ display:flex; }

.ts-hero__dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:3;
}
.ts-hero__dots button{
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:4px;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:width .2s ease, background-color .2s ease;
}
.ts-hero__dots button.is-on{ width:22px; background:#fff; }

.ts-hero__side{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ts-promo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 18px;
  border-radius:var(--ts-r-lg);
  background:var(--ts-accent-soft);
  border:1px solid #CFDEFB;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-promo:hover{ border-color:var(--ts-accent); transform:translateY(-2px); }
.ts-promo b{
  font-size:15px;
  font-weight:600;
  color:var(--ts-text);
  margin-bottom:3px;
}
.ts-promo span{ font-size:12.5px; line-height:1.55; color:var(--ts-text-soft); }

/* banner phụ dạng ảnh — bỏ nền, viền, đệm của bản chữ */
.ts-promo--img{
  padding:0 !important;
  border:0 !important;
  background:none !important;
  overflow:hidden;
  display:block;
  border-radius:var(--ts-r-lg);
}
.ts-promo--img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (min-width:1024px){
  .ts-hero{ padding:20px 0 0; }
  .ts-hero__row{ grid-template-columns:2fr 1fr; gap:14px; }
  .ts-hero__main{ aspect-ratio:auto; height:340px; }
  .ts-hero__side{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; gap:14px; }
  .ts-promo{ padding:20px 22px; }
  .ts-promo b{ font-size:16px; }
}
@media (max-width:767px){
  .ts-hero{ padding:12px 0 0; }
  .ts-hero__main{ aspect-ratio:83/34; border-radius:var(--ts-r-md); }
  .ts-promo{ padding:13px 14px; border-radius:var(--ts-r-md); }
  .ts-promo b{ font-size:13.5px; }
  .ts-promo span{ font-size:11.5px; }
}


/* ==========================================================================
   A8. DẢI CAM KẾT  (ts_trust)
   ========================================================================== */
.ts-trust{
  margin-top:20px;
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
  background:#fff;
  font-family:var(--ts-font);
}
.ts-trust__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ts-trust__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 12px;
  min-width:0;
}
.ts-trust__item + .ts-trust__item{ border-left:1px solid var(--ts-line-soft); }
.ts-trust__item svg{ color:var(--ts-accent-text); flex-shrink:0; }
.ts-trust__item div{ min-width:0; }
.ts-trust__item b{
  display:block;
  font-size:12.5px;
  font-weight:500;
  color:var(--ts-text);
  line-height:1.4;
}
.ts-trust__item span{
  display:block;
  font-size:11px;
  line-height:1.45;
  color:var(--ts-text-faint);
  margin-top:2px;
}
.ts-trust__item--wide{ display:none; }

@media (min-width:768px){
  .ts-trust__row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ts-trust__item--wide{ display:flex; }
}
@media (max-width:767px){
  .ts-trust__item{ flex-direction:column; align-items:flex-start; gap:6px; padding:12px 10px; }
  .ts-trust__item b{ font-size:11.5px; }
  .ts-trust__item span{ display:none; }
}


/* ==========================================================================
   A9. DANH MỤC NỔI BẬT  (ts_categories)
   ========================================================================== */
.ts-cats{ padding:30px 0; font-family:var(--ts-font); }

.ts-cats__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (min-width:768px){
  .ts-cats__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
}
@media (min-width:992px){
  .ts-cats__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
}

.ts-cat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 10px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  text-align:center;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-cat:hover{ border-color:var(--ts-accent); transform:translateY(-2px); }

.ts-cat__ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--ts-accent-soft);
  color:var(--ts-accent-text);
  transition:background-color .15s ease, color .15s ease;
}
.ts-cat:hover .ts-cat__ic{ background:var(--ts-accent); color:#fff; }

.ts-cat__t{
  font-size:12.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--ts-text-mid);
}
.ts-cat:hover .ts-cat__t{ color:var(--ts-accent-text); }

/* ô LEGO dùng tông vàng để nhất quán với khối LEGO phía dưới */
.ts-cat--lego .ts-cat__ic{ background:var(--ts-lego-card); color:var(--ts-lego-ink); }
.ts-cat--lego:hover{ border-color:var(--ts-lego-line); }
.ts-cat--lego:hover .ts-cat__ic{ background:var(--ts-lego-line); color:var(--ts-lego-ink); }
.ts-cat--lego:hover .ts-cat__t{ color:var(--ts-lego-ink); }

@media (max-width:767px){
  .ts-cats{ padding:22px 0; }
  .ts-cat{ padding:14px 8px; gap:8px; }
  .ts-cat__ic{ width:40px; height:40px; }
  .ts-cat__ic svg{ width:22px; height:22px; }
  .ts-cat__t{ font-size:11.5px; }
}


/* ==========================================================================
   A11. DẢI ĐẠI LÝ CHÍNH THỨC  (ts_brands)
   ========================================================================== */
.ts-brands{ padding:30px 0; font-family:var(--ts-font); }
.ts-brands__row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.ts-brands__row::-webkit-scrollbar{ display:none; }
.ts-brands__row .ts-brand{
  flex:1 0 auto;
  min-width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 12px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  transition:border-color .15s ease, transform .15s ease;
}
.ts-brands__row .ts-brand:hover{ border-color:var(--ts-accent); transform:translateY(-2px); }
.ts-brands__row .ts-brand img{
  max-height:32px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.72;
  transition:filter .15s ease, opacity .15s ease;
}
.ts-brands__row .ts-brand:hover img{ filter:none; opacity:1; }
.ts-brands__row .ts-brand span{
  font-size:11px;
  letter-spacing:.4px;
  color:var(--ts-text-faint);
}
@media (min-width:992px){
  .ts-brands__row{ overflow:visible; }
  .ts-brands__row .ts-brand{ flex:1 1 0; min-width:0; }
}
@media (max-width:767px){
  .ts-brands{ padding:22px 0; }
  .ts-brands__row .ts-brand{ min-width:104px; padding:13px 10px; }
  .ts-brands__row .ts-brand img{ max-height:26px; }
}


/* ==========================================================================
   A12. VIDEO REVIEW  (ts_choice)
   Video lớn bên trái, danh sách video nhỏ bên phải.
   ========================================================================== */
.ts-choice{
  background:var(--ts-dark);
  padding:30px 0;
  font-family:var(--ts-font);
}

.ts-choice__head{ margin-bottom:16px; }
.ts-choice__title{
  font-size:19px;
  font-weight:600;
  color:#fff;
  margin:0;
  line-height:1.35;
}
.ts-choice__lede{
  font-size:12.5px;
  line-height:1.6;
  color:var(--ts-dark-text);
  margin:4px 0 0;
  max-width:70ch;
}

.ts-choice__row{ display:grid; grid-template-columns:1fr; gap:16px; }

/* --- khung video lớn --- */
.ts-choice__player{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--ts-r-md);
  overflow:hidden;
  background:var(--ts-dark-2);
  cursor:pointer;
}
.ts-choice__player img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-choice__player iframe{ width:100%; height:100%; border:0; display:block; }
.ts-choice__player button{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60px; height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--ts-dark);
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;
}
.ts-choice__player:hover button{ background:#fff; transform:translate(-50%,-50%) scale(1.06); }

.ts-choice__cap{ margin-top:10px; }
.ts-choice__cap b{
  display:block;
  font-size:13.5px;
  font-weight:500;
  color:#fff;
  line-height:1.45;
}
.ts-choice__cap span{
  display:block;
  font-size:11.5px;
  color:var(--ts-dark-text);
  margin-top:3px;
}

/* --- danh sách video nhỏ ---
   Trước đây khai cứng 5 hàng chia đều chiều cao. Khai ít hơn 5 video là mỗi
   hàng bị kéo giãn ra rất cao, khối video phình gấp mấy lần và chừa một mảng
   trống lớn. Giờ xếp dọc theo nội dung, thừa bao nhiêu để trống bấy nhiêu. */
.ts-choice__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-content:start;
}
.ts-vid{ flex:0 0 auto; }

.ts-vid{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:0;
  padding:8px;
  border:0;
  border-radius:var(--ts-r-md);
  background:var(--ts-dark-2);
  text-align:left;
  cursor:pointer;
  transition:background-color .15s ease;
  font-family:inherit;
}
.ts-vid:hover{ background:var(--ts-dark-3); }
.ts-vid.is-on{ background:var(--ts-dark-3); box-shadow:inset 3px 0 0 var(--ts-accent-lite); }

/* Ô ảnh nhỏ: đặt CHIỀU CAO CỤ THỂ, không dùng aspect-ratio.
   Snippet ts_choice bọc ảnh bằng thẻ <span>; để nó tự tính chiều cao theo tỉ lệ
   thì mỗi mục phình theo bề ngang cột, mục cao gấp ba và cả khối kéo dài ra. */
.ts-vid__th{
  position:relative;
  flex:0 0 92px;
  width:92px;
  height:52px;
  border-radius:var(--ts-r-sm);
  overflow:hidden;
  background:var(--ts-dark-3);
}
.ts-vid__th img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-vid__th i{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
}
.ts-vid__th i::after{
  content:'';
  position:absolute;
  top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent #fff;
}
.ts-vid:hover .ts-vid__th i{ background:rgba(0,0,0,.78); }

.ts-vid__info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ts-vid__info b{
  font-size:12px;
  font-weight:400;
  color:#fff;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-vid__info em{
  font-style:normal;
  font-size:10.5px;
  color:#8A96AE;
}

@media (min-width:992px){
  .ts-choice{ padding:44px 0; }
  /* align-items:start — không kéo hai cột cho bằng nhau. Cột danh sách ngắn
     hơn thì để ngắn, đừng giãn ra cho bằng khung video. */
  .ts-choice__row{ grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
  .ts-choice__title{ font-size:22px; }
  .ts-choice__main{ display:flex; flex-direction:column; }
}
@media (max-width:767px){
  .ts-choice{ padding:24px 0; }
  .ts-choice__title{ font-size:17px; }
  .ts-choice__player button{ width:48px; height:48px; }
  .ts-vid__th{ flex-basis:84px; width:84px; height:47px; }
}


/* ==========================================================================
   A13. GÓC CÔNG NGHỆ  (ts_blog)
   ========================================================================== */
.ts-blog{ padding:30px 0; font-family:var(--ts-font); }
.ts-blog__grid{ display:grid; grid-template-columns:1fr; gap:12px; }

.ts-post{
  display:flex;
  gap:12px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-lg);
  overflow:hidden;
  padding:10px;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-post:hover{ border-color:#CBD2DE; transform:translateY(-2px); }
.ts-post__img{
  width:104px;
  flex-shrink:0;
  aspect-ratio:16/10;
  border-radius:var(--ts-r-sm);
  overflow:hidden;
  background:var(--ts-bg-alt);
}
.ts-post__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-post__body{ display:flex; flex-direction:column; min-width:0; }
.ts-post__kind{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
  margin-bottom:4px;
}
.ts-post__kind.is-review{ color:var(--ts-accent-text); }
.ts-post__kind.is-lego{ color:var(--ts-ok); }
.ts-post__t{
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  color:var(--ts-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-post:hover .ts-post__t{ color:var(--ts-accent-text); }
.ts-post__d{ font-size:11.5px; color:var(--ts-text-faint); margin-top:auto; padding-top:6px; }

@media (min-width:768px){
  .ts-blog__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .ts-post{ flex-direction:column; padding:0; }
  .ts-post__img{ width:100%; aspect-ratio:16/9; border-radius:0; }
  .ts-post__body{ padding:12px 14px 14px; }
  .ts-post__d{ padding-top:8px; }
}
@media (max-width:767px){
  .ts-blog{ padding:22px 0; }
}


/* ==========================================================================
   A14. TRANG DANH MỤC
   Số đo lấy đúng từ bản dựng danh-muc.html: .cbanner .pill--a .ban--a
   ========================================================================== */

/* --- dải navy đầu trang, tràn hết chiều ngang, chữ nằm trong .container --- */
.ts-colhero{
  display:flex;
  align-items:center;
  min-height:150px;
  padding:26px 0;
  background:linear-gradient(120deg,#1E2A44 0%,#0F1729 100%);
  color:#fff;
}
.ts-colhero__title{
  margin:0 0 4px;
  font-size:22px;
  font-weight:500;
  line-height:1.25;
  color:#fff;
}
.ts-colhero__meta{
  margin:0;
  font-size:12.5px;
  color:rgba(255,255,255,.8);
}
@media (min-width:1024px){
  .ts-colhero{ min-height:210px; }
  .ts-colhero__title{ font-size:32px; }
}

/* --- mô tả ngắn dưới dải navy --- */
.ts-coldesc{
  padding:16px 0;
  font-size:13px;
  line-height:1.65;
  color:var(--ts-text-soft);
}
.ts-coldesc p{ margin:0 0 8px; max-width:74ch; }
.ts-coldesc p:last-child{ margin-bottom:0; }

/* --- hàng chip lọc đang chọn ---
   Bản dựng: chip trước, chữ "Xoá tất cả" mờ ở sau. Markup của theme lại xếp
   ngược, nên đảo bằng column-reverse thay vì sửa snippet. */
.ts-colchips{ padding:14px 0 0; }
.ts-colchips:empty{ display:none; }
.ts-colchips .filter-container__selected-filter{
  display:flex;
  flex-direction:column-reverse;
  background:none;
  border:0;
  padding:0;
  margin:0;
}
.ts-colchips .filter-container__selected-filter-header{ display:flex; align-items:center; }
.ts-colchips .filter-container__selected-filter-header-title{ display:none; }
.ts-colchips .filter-container__clear-all{
  font-size:11.5px;
  line-height:1.6;
  color:var(--ts-text-faint);
}
.ts-colchips .filter-container__clear-all:hover{ color:var(--ts-sale); }
.ts-colchips .filter-container__clear-all .icon{ display:none; }
.ts-colchips .filter-container__selected-filter-list ul{
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.ts-colchips .filter-container__selected-filter-list li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--ts-accent-soft);
  border:1px solid var(--ts-accent-soft);
  color:var(--ts-accent-text);
  font-size:12px;
  padding:7px 13px;
  border-radius:18px;
  margin:0 6px 8px 0;
  cursor:pointer;
}
.ts-colchips .filter-container__selected-filter-list li svg path{ fill:currentColor; }

/* --- nút Xem thêm, dãy số trang giữ lại bên dưới như bản dựng --- */
.ts-more{ margin-top:22px; text-align:center; }
.ts-more[hidden]{ display:none; }
.ts-more__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 20px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
  color:var(--ts-text);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  transition:background-color .15s ease;
}
.ts-more__btn:hover{ background:var(--ts-bg-alt); }
.ts-more__btn:disabled{ opacity:.6; cursor:default; }
.ts-more__count{
  margin:10px 0 0;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ts-text-faint);
}

/* --- banner dọc cuối cột lọc: ảnh tải lên trong Tuỳ chỉnh giao diện --- */
.ts-filter-banner{
  display:block;
  overflow:hidden;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-lg);
  background:var(--ts-bg-alt);
  transition:border-color .15s ease, transform .15s ease;
}
.ts-filter-banner:hover{ border-color:var(--ts-accent); transform:translateY(-2px); }
.ts-filter-banner img{ display:block; width:100%; height:auto; }


/* ==========================================================================
   A15. TRANG SẢN PHẨM — thành phần thêm mới
   Số đo lấy từ bản chuẩn san-pham.html: .ksp .pnote .promos
   ========================================================================== */

/* dòng hãng · mã trên tên sản phẩm */
.ts-eyebrow{
  display:block;
  margin:0 0 6px;
  font-size:11.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
}

/* hàng chip thông số dưới tên */
.ts-pchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.ts-pchips span{
  font-size:11.5px;
  line-height:1.4;
  padding:4px 9px;
  background:var(--ts-chip-bg);
  color:var(--ts-chip-text);
  border-radius:4px;
  white-space:nowrap;
}

/* dòng tiết kiệm · trả góp, ngay dưới giá */
.ts-save{
  margin:4px 0 0;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ts-text-faint);
}

/* số điểm tích được khi mua sản phẩm, dưới dòng tiết kiệm */
.ts-earnline{
  display:flex;
  align-items:center;
  gap:6px;
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ts-text-soft);
}
.ts-earnline[hidden]{ display:none; }
.ts-earnline svg{ flex-shrink:0; color:var(--ts-ok); }
.ts-earnline b{ color:var(--ts-ok); font-weight:600; }
.ts-earnline__x{
  display:inline-block;
  margin-left:4px;
  padding:0 7px;
  border-radius:10px;
  background:var(--ts-ok);
  color:#fff;
  font-size:10.5px;
  font-style:normal;
  font-weight:600;
  line-height:18px;
  white-space:nowrap;
  vertical-align:1px;
}

/* dòng giao hàng — bản dựng là hai đường kẻ mảnh, không phải hộp màu */
.ts-pnote{
  display:flex;
  align-items:center;
  gap:9px;
  margin:14px 0;
  padding:12px 0;
  border-top:1px solid var(--ts-line-soft);
  border-bottom:1px solid var(--ts-line-soft);
  font-size:13px;
  line-height:1.5;
  color:var(--ts-text-mid);
}
.ts-pnote svg{ flex-shrink:0; color:var(--ts-accent-text); }
/* dòng giao hàng nhiều hàng, nội dung ở TS · Trang sản phẩm */
.ts-pnote--rows{ flex-direction:column; align-items:stretch; gap:7px; }
.ts-pnote__row{ display:flex; align-items:center; gap:9px; min-width:0; }
.ts-pnote__row svg{ flex-shrink:0; color:var(--ts-accent-text); }
.ts-pnote__more{ margin-left:auto; flex-shrink:0; font-size:12px; font-weight:500; color:var(--ts-accent-text); white-space:nowrap; }
.ts-pnote__more:hover{ text-decoration:underline; }
/* Băng hot deal trang sản phẩm (thay khối flash sale đỏ của theme gốc). Viết hai cấp
   .details-pro .ts-fsbar để thắng luật thẻ a của theme. Chip đồng hồ dùng chung .ts-countdown với trang chủ. */
.details-pro .ts-fsbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px;
  margin:12px 0 4px; padding:10px 12px;
  border:1px solid var(--ts-line); border-radius:var(--ts-r-md);
  background:#fff; color:var(--ts-text); text-decoration:none;
  transition:border-color .15s ease;
}
.details-pro .ts-fsbar:hover{ border-color:var(--ts-sale); text-decoration:none; }
.ts-fsbar__ic{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ts-sale-soft); color:var(--ts-sale);
}
.ts-fsbar__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.ts-fsbar__txt b{ font-size:13.5px; font-weight:600; color:var(--ts-text); }
.ts-fsbar__txt small{ font-size:11.5px; color:var(--ts-text-soft); }
.details-pro .ts-fsbar:hover .ts-fsbar__txt small{ color:var(--ts-sale); }
.ts-fsbar__end{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.ts-fsbar__end small{ font-size:11.5px; color:var(--ts-text-soft); white-space:nowrap; }
/* Đồng hồ đếm ngược deal, dùng chung trang chủ (khối Deal shock) và trang sản phẩm (băng hot deal).
   Script thêm class ts-cd vào .ts-countdown và vẽ từng ô số; is-urgent khi còn dưới 24 giờ. */
.ts-countdown.ts-cd{ display:inline-flex; align-items:center; gap:3px; padding:0; background:none; color:var(--ts-sale); }
.ts-cd__b{
  display:inline-flex; align-items:baseline; justify-content:center; gap:2px;
  min-width:28px; height:28px; padding:0 6px; border-radius:6px;
  background:var(--ts-sale); color:#fff;
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace; font-size:14px; font-weight:700; line-height:28px;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(220,38,38,.28);
}
.ts-cd__b small{ margin-left:2px; font-family:inherit; font-size:10.5px; font-weight:600; }
/* chữ "ngày" trong ô luôn trắng, kể cả khi nằm trong .ts-fsbar__end (luật small màu xám) */
.ts-countdown .ts-cd__b small{ color:inherit; white-space:nowrap; }
.ts-cd__c{ font-size:14px; font-weight:700; color:var(--ts-sale); }
.ts-cd__lbl{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ts-sale); white-space:nowrap; }
.ts-cd__lbl::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ts-sale); animation:tsLive 1.6s ease-out infinite; }
@keyframes tsLive{ 0%{ box-shadow:0 0 0 0 rgba(220,38,38,.55); } 70%{ box-shadow:0 0 0 7px rgba(220,38,38,0); } 100%{ box-shadow:0 0 0 0 rgba(220,38,38,0); } }
.ts-countdown.is-urgent .ts-cd__b{ animation:tsBeat 1s ease-in-out infinite; }
@keyframes tsBeat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.ts-section__right .ts-cd__lbl{ margin-right:2px; }
.details-pro .ts-fsbar{ background:linear-gradient(90deg,#fff 45%,var(--ts-sale-soft)); border-color:#F5C6C6; }
@media (max-width:575px){
  .ts-section__right .ts-cd__lbl{ display:none; }
  /* khối có đồng hồ: đưa cụm bên phải xuống hàng riêng để tiêu đề không bị ép */
  .ts-section__head:has(.ts-cd){ flex-wrap:wrap; row-gap:8px; }
  .ts-section__head:has(.ts-cd) .ts-section__left{ flex:1 0 100%; }
  .ts-section__head:has(.ts-cd) .ts-section__right{ flex:1 0 100%; justify-content:space-between; }
  .ts-cd__b{ min-width:24px; height:24px; line-height:24px; padding:0 5px; font-size:12.5px; }
  .ts-cd__c{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){ .ts-cd__lbl::before, .ts-countdown.is-urgent .ts-cd__b{ animation:none; } }

/* dòng hàng đặt trước, chỉ hiện khi sản phẩm có tag vehang_ */
.ts-preorder{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding:9px 12px;
  border-radius:var(--ts-r-sm);
  background:var(--ts-warn-soft);
  color:var(--ts-warn);
  font-size:12.5px;
  line-height:1.5;
}
.ts-preorder svg{ flex-shrink:0; }
.ts-preorder b{ font-weight:600; }

/* điểm mạnh sản phẩm, đặt dưới khung ảnh */
.ts-ksp{
  margin:20px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--ts-line-soft);
}
.ts-ksp ul, .ts-ksp ol{ margin:0; padding:0; list-style:none; }
/* Nguồn là Mô tả ngắn của sản phẩm nên nội dung thường là các đoạn văn,
   không phải danh sách. Gắn dấu chấm cho cả hai dạng. */
/* Chỉ gắn chấm cho đoạn văn là con TRỰC TIẾP của khối. Mô tả ngắn thường được
   trình soạn thảo bọc thành <ul><li><p>, khi đó cả li lẫn p đều nhận chấm và
   mỗi dòng hiện hai chấm liền nhau. */
.ts-ksp > p{
  position:relative;
  margin:0 0 8px;
  padding-left:18px;
  font-size:13px;
  line-height:1.7;
  color:var(--ts-text-mid);
}
.ts-ksp > p:last-child{ margin-bottom:0; }
.ts-ksp > p::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--ts-accent-text);
}
.ts-ksp li{
  display:flex;
  gap:10px;
  margin-bottom:6px;
  font-size:13px;
  line-height:1.7;
  color:var(--ts-text-mid);
}
.ts-ksp li:last-child{ margin-bottom:0; }
.ts-ksp li::before{ content:"•"; color:var(--ts-accent-text); }
/* đoạn văn nằm trong li thì bỏ hết chấm và lề, chấm đã do li lo */
.ts-ksp li p{ margin:0; padding:0; }
.ts-ksp li p::before{ content:none; }
.ts-ksp b, .ts-ksp strong{ color:var(--ts-text); font-weight:500; }


/* ==========================================================================
   A16. TRANG SẢN PHẨM — mua kèm, video, thông số, liên quan, thanh mua
   Số đo lấy từ bản dựng san-pham.html: .combo .crow .choice .vid .spec .buybar
   ========================================================================== */

/* ---- khối mua kèm ---- */
.ts-combo{
  background:var(--ts-bg-alt);
  border-bottom:1px solid var(--ts-line);
  padding:30px 0;
}
.ts-combo__h{ margin:0; font-size:17px; font-weight:500; text-transform:uppercase; letter-spacing:.3px; color:var(--ts-text); }
.ts-combo__s{ margin:4px 0 16px; font-size:13px; line-height:1.65; color:var(--ts-text-soft); }
@media (min-width:1024px){
  .ts-combo{ padding:52px 0; }
  .ts-combo__h{ font-size:21px; }
}

.ts-crow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:9px;
  padding:11px;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  cursor:pointer;
}
.ts-crow.on{ border:2px solid var(--ts-accent); padding:10px; }
.ts-crow--main{ cursor:default; }
.ts-crow--sum{ cursor:default; background:#fff; }

.ts-crow__ck{
  position:relative;
  flex:0 0 20px;
  width:20px;
  height:20px;
  align-self:center;
  border:2px solid #C9D1DF;
  border-radius:5px;
  background:#fff;
}
.ts-crow.on .ts-crow__ck{ background:var(--ts-accent); border-color:var(--ts-accent); }
.ts-crow.on .ts-crow__ck::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:8px;
  margin:-6px 0 0 -2px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.ts-crow__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 54px;
  width:54px;
  height:54px;
  overflow:hidden;
  border-radius:var(--ts-r-sm);
  background:var(--ts-bg-alt);
}
.ts-crow__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

.ts-crow__b{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.ts-crow__n{
  font-size:13px;
  line-height:1.45;
  color:var(--ts-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-crow__note{ font-size:11.5px; color:var(--ts-text-faint); }
.ts-crow__save{ font-size:11px; color:var(--ts-ok); }

.ts-crow__p{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.ts-crow__price{ font-size:14.5px; font-weight:500; color:var(--ts-text); white-space:nowrap; }
.ts-crow__was{ font-size:11.5px; color:#9AA3B4; text-decoration:line-through; white-space:nowrap; }

.ts-combo__was{
  font-size:12.5px;
  color:#9AA3B4;
  text-decoration:line-through;
}
.ts-combo__was:empty{ display:none; }
.ts-combo__total{ font-size:21px; font-weight:500; color:var(--ts-accent-text); line-height:1.2; }
.ts-combo__save{ font-size:11.5px; color:var(--ts-ok); }
.ts-combo__save:empty{ display:none; }
.ts-combo__btn{
  flex-shrink:0;
  padding:12px 20px;
  border:0;
  border-radius:var(--ts-r-md);
  background:var(--ts-accent);
  color:var(--ts-accent-ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  transition:filter .15s ease;
}
.ts-combo__btn:hover{ filter:brightness(.94); }
.ts-combo__btn:disabled{ opacity:.55; cursor:default; }

/* ---- khối video trang sản phẩm ----
   Tên phải khác .ts-choice — class đó là khối Video review ở TRANG CHỦ. */
.ts-pvideo{ background:var(--ts-dark); color:#fff; padding:30px 0; }
@media (min-width:1024px){ .ts-pvideo{ padding:52px 0; } }
/* Nhãn khối video, cỡ ngang với tiêu đề các khối khác trên trang */
.ts-tag{
  display:inline-block;
  margin-bottom:16px;
  padding:7px 14px;
  border-radius:var(--ts-r-sm);
  background:var(--ts-accent-lite);
  color:#08122A;
  font-size:17px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.3px;
  text-transform:uppercase;
}
@media (min-width:1024px){
  .ts-tag{ font-size:21px; padding:8px 16px; }
}
/* Khung video trang sản phẩm.
   TÊN PHẢI KHÁC .ts-vid — class đó đã là mục video nhỏ trong khối Video review
   ở trang chủ. Đặt trùng tên thì aspect-ratio 16:9 ở đây đè lên từng mục của
   danh sách kia, mỗi mục phình lên gấp ba và cả khối kéo dài ra. */
.ts-vidframe{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--ts-r-md);
  background:var(--ts-dark-2);
}
.ts-vidframe iframe{ width:100%; height:100%; border:0; display:block; }

/* ---- khối mô tả + thông số ---- */
.ts-pmid{ padding:30px 0; }
/* Bảng thông số dính khi cuộn, cho bài mô tả dài.
   Hàng bootstrap mặc định kéo hai cột cao bằng nhau, mà thẻ dính chỉ chạy khi
   cột tự do cao theo nội dung — nên phải đổi canh về đầu hàng trước. */
@media (min-width:992px){
  .ts-pmid .row{ align-items:flex-start; }
  .ts-specs{
    position:sticky;
    top:90px;
    align-self:flex-start;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
  }
  .ts-specs::-webkit-scrollbar{ width:4px; }
  .ts-specs::-webkit-scrollbar-thumb{ background:var(--ts-line); border-radius:2px; }
}
.ts-reviews{
  padding:30px 0;
  background:var(--ts-bg-alt);
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
}
.ts-related{ padding:30px 0; }
@media (min-width:1024px){
  .ts-pmid, .ts-reviews, .ts-related{ padding:52px 0; }
}
.ts-related__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.ts-related__head h2{ margin:0; font-size:17px; font-weight:500; text-transform:uppercase; letter-spacing:.3px; }
@media (min-width:1024px){ .ts-related__head h2{ font-size:21px; } }
.ts-related__more{ font-size:12.5px; color:var(--ts-accent-text); white-space:nowrap; }
.ts-related__more:hover{ text-decoration:underline; }

/* lưới sản phẩm liên quan: 2 / 3 / 5 cột, thay cho băng trượt của theme */
.ts-prow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:start;
}
@media (min-width:768px){ .ts-prow{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
@media (min-width:1024px){ .ts-prow{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* ---- thanh mua cố định ---- */
.ts-buybar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--ts-line);
  backdrop-filter:blur(8px);
}
.ts-buybar__info{ display:flex; flex-direction:column; flex:1; min-width:0; }
.ts-buybar__price{ font-size:15px; font-weight:500; color:var(--ts-accent-text); }
.ts-buybar__was{ font-size:11.5px; color:#9AA3B4; text-decoration:line-through; }
.ts-buybar__was:empty{ display:none; }
.ts-buybar button{
  flex-shrink:0;
  padding:9px 14px;
  border-radius:var(--ts-r-md);
  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
.ts-buybar__cart{ background:#fff; color:var(--ts-text); border:1px solid var(--ts-line); }
.ts-buybar__buy{ background:var(--ts-accent); color:var(--ts-accent-ink); border:0; }
body.ts-hasbar{ padding-bottom:74px; }
@media (min-width:1024px){
  .ts-buybar{ display:none; }
  body.ts-hasbar{ padding-bottom:0; }
}


/* ==========================================================================
   A17. TRANG BLOG
   Số đo lấy từ bản dựng blog.html: .bloglay .feat .post .catlist .adbox
   ========================================================================== */

.ts-bloghead{ padding:22px 0 0; }
.ts-bloghead__t{
  margin:0 0 8px;
  font-size:24px;
  font-weight:500;
  line-height:1.25;
  color:var(--ts-text);
}
.ts-bloghead__s{
  margin:0;
  max-width:70ch;
  font-size:13px;
  line-height:1.65;
  color:var(--ts-text-soft);
}
@media (min-width:1024px){ .ts-bloghead__t{ font-size:38px; } }

/* hàng nút lọc, chỉ trên máy nhỏ — máy tính đã có cột bên */
.ts-pills{ margin-top:18px; display:flex; flex-wrap:wrap; }
.ts-pill{
  display:inline-block;
  margin:0 6px 8px 0;
  padding:7px 13px;
  border:1px solid var(--ts-line);
  border-radius:18px;
  background:#fff;
  color:var(--ts-text-mid);
  font-size:12px;
}
.ts-pill.on{ background:var(--ts-text); border-color:var(--ts-text); color:#fff; }
@media (min-width:1024px){ .ts-pills{ display:none; } }

/* ---- khối nổi bật: 1 bài lớn + 3 bài nhỏ ---- */
.ts-featsec{ padding:22px 0 0; }
.ts-feat{ display:grid; grid-template-columns:1fr; gap:10px; }
.ts-feat__lead{ display:block; }
.ts-feat__img{
  display:block;
  aspect-ratio:16/9;
  margin-bottom:14px;
  overflow:hidden;
  border-radius:var(--ts-r-lg);
  background:var(--ts-bg-alt);
}
.ts-feat__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-feat__t{
  display:block;
  margin-bottom:6px;
  font-size:17px;
  font-weight:500;
  line-height:1.35;
  color:var(--ts-text);
}
.ts-feat__lead:hover .ts-feat__t{ color:var(--ts-accent-text); }
.ts-feat__lead .ts-kind{ color:var(--ts-accent-text); letter-spacing:.7px; }
.ts-feat__lead .ts-kind.is-lego{ color:var(--ts-ok); }
.ts-feat__s{
  display:block;
  font-size:13px;
  line-height:1.65;
  color:var(--ts-text-soft);
}
.ts-feat__side{ display:flex; flex-direction:column; }
@media (min-width:1024px){
  .ts-featsec{ padding:32px 0 0; }
  .ts-feat{ grid-template-columns:1.55fr 1fr; gap:32px; align-items:start; }
  .ts-feat__img{ aspect-ratio:16/8; }
  .ts-feat__t{ font-size:21px; }
}

/* ---- thẻ bài viết ----
   Tên phải khác .ts-post — class đó là thẻ bài trong khối Góc công nghệ ở
   TRANG CHỦ, khai ở mục A13. Trùng tên thì hai bộ luật đè nhau, thẻ ở trang
   blog ăn phải viền và đệm của thẻ trang chủ. */
.ts-bpost{ display:flex; gap:12px; padding:14px 0; }
.ts-bpost:first-child{ padding-top:0; }
.ts-bpost + .ts-bpost{ border-top:1px solid var(--ts-line-soft); }
.ts-bpost__th{
  flex:0 0 72px;
  width:72px;
  height:54px;
  overflow:hidden;
  border-radius:8px;
  background:var(--ts-bg-alt);
}
.ts-bpost__th img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-bpost__body{ display:block; min-width:0; }
.ts-bpost__t{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
  line-height:1.45;
  color:var(--ts-text);
}
.ts-bpost:hover .ts-bpost__t{ color:var(--ts-accent-text); }
.ts-kind{
  display:block;
  margin-bottom:6px;
  font-size:10.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
}
.ts-kind.is-rv{ color:var(--ts-accent-text); }
.ts-kind.is-lego{ color:var(--ts-ok); }
.ts-note{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ts-text-faint);
}

/* ---- bố cục chính: cột bên TRÁI, lưới bài 3 cột ---- */
.ts-blogmain{ padding:26px 0; }
.ts-bloglay{ display:block; }
.ts-blogside{ display:none; }
.ts-bposts{ display:block; }
@media (min-width:1024px){
  .ts-blogmain{ padding:44px 0; }
  .ts-bloglay{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; }
  /* Dính khi cuộn. Cột bên cao hơn màn hình thì chỉ dính được phần đầu, nên
     chặn chiều cao và cho cuộn riêng bên trong — ảnh quảng cáo giữ nguyên
     bề ngang, không phải thu nhỏ. */
  .ts-blogside{
    display:block;
    position:sticky;
    top:90px;
    align-self:start;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
  }
  .ts-blogside::-webkit-scrollbar{ width:4px; }
  .ts-blogside::-webkit-scrollbar-thumb{ background:var(--ts-line); border-radius:2px; }
  .ts-bposts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .ts-readnext .ts-bposts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ts-bposts .ts-bpost{
    flex-direction:column;
    gap:0;
    padding:0;
    border:1px solid var(--ts-line);
    border-radius:var(--ts-r-lg);
    overflow:hidden;
    transition:border-color .15s ease, transform .15s ease;
  }
  .ts-bposts .ts-bpost:hover{ border-color:#CBD2DE; transform:translateY(-2px); }
  .ts-bposts .ts-bpost + .ts-bpost{ border-top:1px solid var(--ts-line); }
  .ts-bposts .ts-bpost__th{ flex:none; width:100%; height:auto; aspect-ratio:16/9; border-radius:0; }
  .ts-bposts .ts-bpost__body{ padding:12px 14px 16px; }
  /* trong khối nổi bật thì vẫn là hàng ngang, ảnh to hơn chút */
  .ts-feat__side .ts-bpost__th{ flex-basis:96px; width:96px; height:64px; }
}

/* ---- các khối trong cột bên ---- */
.ts-grp{
  margin-bottom:14px;
  padding:14px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
}
.ts-grp h4{ margin:0 0 8px; font-size:12.5px; font-weight:500; color:var(--ts-text); }
.ts-catlist{ list-style:none; margin:0; padding:0; }
.ts-catlist li{ border-bottom:1px solid var(--ts-line-soft); }
.ts-catlist li:last-child{ border-bottom:0; }
.ts-catlist a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  font-size:13px;
  line-height:1.45;
  color:var(--ts-text-mid);
}
.ts-catlist em{
  flex-shrink:0;
  font-style:normal;
  font-size:11.5px;
  color:var(--ts-text-faint);
}
.ts-catlist a:hover{ color:var(--ts-accent-text); }
.ts-catlist a.on{ color:var(--ts-accent-text); font-weight:500; }

/* sản phẩm nhắc trong bài */
.ts-srow{ display:flex; align-items:center; gap:11px; padding:9px 0; }
.ts-srow + .ts-srow{ border-top:1px solid var(--ts-line-soft); }
.ts-srow__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  overflow:hidden;
  border-radius:var(--ts-r-sm);
  background:var(--ts-bg-alt);
}
.ts-srow__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ts-srow__b{ min-width:0; }
.ts-srow__n{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ts-text);
}
.ts-srow__p{ display:block; margin-top:2px; font-size:13px; font-weight:500; color:var(--ts-text); }

/* ---- ô quảng cáo ----
   Chặn chiều cao. Ảnh quá cao thì cột bên dài hơn màn hình, mà thẻ dính khi
   cuộn chỉ hoạt động khi khối vừa lọt trong màn hình — cột dài quá là nó trôi
   theo trang như thường. Dùng contain nên ảnh không bị cắt mất chữ. */
.ts-adbox{
  display:block;
  overflow:hidden;
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-alt);
}
.ts-adbox img{ display:block; width:100%; height:auto; }


/* ==========================================================================
   A18. TRANG BÀI VIẾT
   Số đo lấy từ bản dựng bai-viet.html: .artlay .rte .avatar .srow
   ========================================================================== */

.ts-artlay{ display:block; padding:22px 0 30px; }
@media (min-width:1024px){
  .ts-artlay{
    display:grid;
    grid-template-columns:1.75fr 1fr;
    gap:36px;
    align-items:start;
    padding:32px 0 52px;
  }
  .ts-artside{
    position:sticky;
    top:90px;
    align-self:start;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
  }
  .ts-artside::-webkit-scrollbar{ width:4px; }
  .ts-artside::-webkit-scrollbar-thumb{ background:var(--ts-line); border-radius:2px; }
}

.ts-art__kind{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--ts-accent-text);
}
.ts-art__t{
  margin:0 0 8px;
  font-size:24px;
  font-weight:500;
  line-height:1.25;
  color:var(--ts-text);
}
@media (min-width:1024px){ .ts-art__t{ font-size:34px; } }

.ts-art__by{ display:flex; align-items:center; gap:10px; margin:14px 0 20px; }
.ts-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--ts-chip-bg);
  color:var(--ts-chip-text);
  font-size:14px;
  font-weight:500;
  text-transform:uppercase;
}
.ts-art__byinfo{ display:flex; flex-direction:column; font-size:11.5px; line-height:1.5; }
.ts-art__byinfo b{ font-size:13px; font-weight:500; color:var(--ts-text); }
.ts-art__byinfo em{ font-style:normal; color:var(--ts-text-faint); }

.ts-art__cover{
  aspect-ratio:16/9;
  margin-bottom:20px;
  overflow:hidden;
  border-radius:var(--ts-r-lg);
  background:var(--ts-bg-alt);
}
.ts-art__cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Không giới hạn bề ngang dòng chữ. Cột bài đã hẹp sẵn, thêm giới hạn 70 ký
   tự nữa thì chữ ngắn hơn ảnh bìa, hai mép phải lệch nhau trông rất rõ. */
.ts-art__rte{
  font-size:14px;
  line-height:1.85;
  color:var(--ts-text-mid);
}
.ts-art__rte h2{ margin:26px 0 10px; font-size:17px; font-weight:500; color:var(--ts-text); }
.ts-art__rte h3{ margin:22px 0 8px; font-size:15px; font-weight:500; color:var(--ts-text); }
.ts-art__rte p{ margin:0 0 16px; }
.ts-art__rte img{ border-radius:var(--ts-r-md); margin:0 0 16px; }
.ts-art__rte ul, .ts-art__rte ol{ margin:0 0 16px; padding-left:20px; }
.ts-art__rte li{ margin-bottom:6px; }
.ts-art__rte a{ color:var(--ts-accent-text); }

/* Video chèn bằng nút chèn video của trình soạn thảo: ép về khung 16:9 bo góc,
   không cần thẻ đánh dấu nào. */
.ts-art__rte iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  margin:0 0 16px;
  border:0;
  border-radius:var(--ts-r-md);
  background:var(--ts-dark-2);
}

/* Ô sản phẩm chèn giữa bài, sinh ra từ thẻ [sp:đường-dẫn] */
.ts-inline{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  padding:11px 13px;
  border:1px solid var(--ts-line);
  border-left:3px solid var(--ts-accent);
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-alt);
  transition:border-color .15s ease;
}
.ts-inline:hover{ border-color:var(--ts-accent); }
.ts-inline__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  overflow:hidden;
  border-radius:var(--ts-r-sm);
  background:#fff;
}
.ts-inline__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ts-inline__b{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.ts-inline__brand{
  font-size:10.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
}
.ts-inline__n{
  font-size:13px;
  line-height:1.4;
  color:var(--ts-text);
}
.ts-inline__p{ font-size:14.5px; font-weight:500; color:var(--ts-text); }
.ts-inline__p em{
  font-style:normal;
  margin-left:6px;
  font-size:11.5px;
  font-weight:400;
  color:#9AA3B4;
  text-decoration:line-through;
}
.ts-inline__btn{
  flex-shrink:0;
  padding:8px 16px;
  border-radius:var(--ts-r-md);
  background:var(--ts-accent);
  color:var(--ts-accent-ink);
  font-size:12.5px;
  font-weight:500;
}
.ts-inline:hover .ts-inline__btn{ filter:brightness(.94); }

/* từ khoá */
.ts-arttags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:22px 0 0; }
.ts-arttags > span{ font-size:11.5px; color:var(--ts-text-faint); margin-right:2px; }
.ts-arttags a{
  padding:4px 11px;
  border-radius:14px;
  background:var(--ts-chip-bg);
  color:var(--ts-chip-text);
  font-size:12px;
}
.ts-arttags a:hover{ background:var(--ts-accent-soft); color:var(--ts-accent-text); }

/* bình luận */
.ts-cmt{ margin-top:30px; padding-top:24px; border-top:1px solid var(--ts-line); }
.ts-cmt__t{ margin:0 0 14px; font-size:15px; font-weight:500; color:var(--ts-text); }
.ts-cmt__row{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
@media (min-width:768px){ .ts-cmt__row{ grid-template-columns:1fr 1fr; } }
.ts-cmt textarea{ width:100%; }
.ts-cmt__btn{
  margin-top:12px;
  padding:12px 20px;
  border:0;
  border-radius:var(--ts-r-md);
  background:var(--ts-accent);
  color:var(--ts-accent-ink);
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
}
.ts-cmt__btn:hover{ filter:brightness(.94); }
.ts-cmt__list{ margin-top:28px; }
.ts-cmt__item{ display:flex; gap:11px; padding:14px 0; border-top:1px solid var(--ts-line-soft); }
.ts-cmt__item b{ font-size:13px; font-weight:500; }
.ts-cmt__item em{ font-style:normal; margin-left:8px; font-size:11.5px; color:var(--ts-text-faint); }
.ts-cmt__item p{ margin:4px 0 0; font-size:13px; line-height:1.7; color:var(--ts-text-soft); }

/* đọc tiếp */
.ts-readnext{
  padding:30px 0;
  background:var(--ts-bg-alt);
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
}
@media (min-width:1024px){ .ts-readnext{ padding:52px 0; } }
.ts-readnext__t{
  margin:0 0 14px;
  font-size:17px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3px;
}
@media (min-width:1024px){ .ts-readnext__t{ font-size:21px; } }
.ts-readnext .ts-bpost{ background:#fff; }


/* ==========================================================================
   A19. TRANG TÌM KIẾM VÀ 404
   Số đo lấy từ bản dựng tim-kiem.html và 404.html: .field .empty .sugbox .cat
   ========================================================================== */

.ts-search{ padding:22px 0 30px; }
.ts-404{ padding:30px 0 44px; }
@media (min-width:1024px){
  .ts-search{ padding:32px 0 44px; }
  .ts-404{ padding:44px 0 60px; }
}

/* ô nhập từ khoá */
.ts-sform{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:560px;
  margin:0 0 22px;
  padding:11px 14px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
}
.ts-sform:focus-within{ border-color:var(--ts-accent); }
.ts-sform--warn{ border:2px solid var(--ts-accent); margin:9px 0 0; max-width:none; }
.ts-sform svg{ flex-shrink:0; color:var(--ts-text-faint); }
.ts-sform input{
  flex:1;
  min-width:0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:none !important;
  padding:0 !important;
  font-family:inherit;
  font-size:13px;
  color:var(--ts-text);
}
.ts-sform input::placeholder{ color:var(--ts-text-faint); }
.ts-sform button{
  flex-shrink:0;
  padding:8px 16px;
  border:0;
  border-radius:var(--ts-r-sm);
  background:var(--ts-accent);
  color:var(--ts-accent-ink);
  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
.ts-sform button:hover{ filter:brightness(.94); }

/* dòng tiêu đề kết quả */
.ts-shead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.ts-shead__t{ margin:0; font-size:20px; font-weight:500; line-height:1.3; }
@media (min-width:1024px){ .ts-shead__t{ font-size:26px; } }

/* khối trống */
.ts-empty{ text-align:center; padding:36px 0 24px; }
.ts-empty__big{
  font-size:52px;
  font-weight:500;
  line-height:1;
  margin-bottom:14px;
  color:#DDE3ED;
}
.ts-empty__t{ margin:0 0 6px; font-size:24px; font-weight:500; line-height:1.25; }
@media (min-width:1024px){ .ts-empty__t{ font-size:30px; } }
.ts-empty__s{ margin:0; font-size:13px; line-height:1.65; color:var(--ts-text-soft); }

/* gợi ý cách tìm */
.ts-tips{ max-width:560px; margin:0 auto 30px; }
.ts-tips ul{ margin:10px 0 0; padding-left:18px; }
.ts-tips li{ font-size:13px; line-height:2; color:var(--ts-text-soft); }

/* ---- bố cục kết quả có cột lọc ----
   Cột lọc do script trong search.bwt dựng. Chưa dựng xong (hoặc lỗi) thì
   .ts-slay không có class has-fil và lưới giữ nguyên 5 cột như cũ. */
/* .ts-prow đặt display:grid nên đè mất thuộc tính hidden; chặn lại cho cả khối */
.ts-slay [hidden]{ display:none !important; }
/* Màn hẹp: gỡ lớp .ts-smain (display:contents) để xếp lại thứ tự:
   hàng nút Bộ lọc lên đầu, bảng lọc mở ra ngay dưới nút, rồi mới tới lưới. */
@media (max-width:1199px){
  .ts-slay.has-fil{ display:flex; flex-direction:column; }
  .ts-slay.has-fil .ts-smain{ display:contents; }
  .ts-slay.has-fil .ts-sbar{ order:1; }
  .ts-slay.has-fil .ts-sfil{ order:2; }
  .ts-slay.has-fil #ts-sorig,
  .ts-slay.has-fil #ts-sres,
  .ts-slay.has-fil #ts-smore{ order:3; }
}
@media (min-width:1200px){
  .ts-slay.has-fil{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
  .ts-slay.has-fil .ts-prow{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ts-smain{ min-width:0; }

/* hàng trên lưới: nút Bộ lọc (chỉ màn hẹp), chip đang chọn, số kết quả */
.ts-sbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ts-sbar[hidden]{ display:none; }
.ts-sbar__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-sm);
  background:#fff;
  color:var(--ts-text);
  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
@media (min-width:1200px){ .ts-sbar__btn{ display:none; } }
.ts-schips{ display:flex; flex-wrap:wrap; gap:6px; }
.ts-schip{
  padding:5px 10px;
  border:1px solid var(--ts-accent);
  border-radius:14px;
  background:#EEF3FE;
  color:var(--ts-accent-text);
  font-family:inherit;
  font-size:12px;
  line-height:1.3;
  cursor:pointer;
}
.ts-schip--all{ border-color:var(--ts-line); background:#fff; color:var(--ts-text-soft); }
.ts-sbar__n{ margin-left:auto; font-size:12.5px; }

/* cột lọc */
.ts-sfil[hidden]{ display:none; }
.ts-sfil{ display:none; margin:0 0 14px; }
.ts-sfil.is-open{ display:block; }
@media (min-width:1200px){
  .ts-sfil{ display:block; position:sticky; top:90px; margin:0; }
  .ts-sfil__done{ display:none; }
}
.ts-sfil__g{
  margin:0 0 10px;
  padding:12px 14px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
}
.ts-sfil__t{ margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--ts-text); }
.ts-sfil__list--scroll{ max-height:240px; overflow-y:auto; padding-right:4px; }
.ts-sfil .ts-sfil__opt{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0;
  padding:4px 0;
  font-size:12.5px;
  font-weight:400;
  line-height:1.5;
  color:var(--ts-text-mid);
  cursor:pointer;
  user-select:none;
}
.ts-sfil .ts-sfil__opt:hover{ color:var(--ts-accent-text); }
.ts-sfil .ts-sfil__opt:focus-visible{ outline:2px solid var(--ts-accent); outline-offset:2px; border-radius:4px; }
.ts-sfil .ts-sfil__opt input{ position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; }
.ts-sfil__box{
  position:relative;
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  border:1px solid var(--ts-line);
  border-radius:4px;
  background:#fff;
}
.ts-sfil .ts-sfil__opt input:checked + .ts-sfil__box{ background:var(--ts-accent); border-color:var(--ts-accent); }
.ts-sfil .ts-sfil__opt input:checked + .ts-sfil__box::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:4px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.ts-sfil__l{ min-width:0; }
.ts-sfil__n{ flex-shrink:0; margin-left:auto; font-size:11.5px; color:var(--ts-text-faint); }
.ts-sfil .ts-sfil__opt.is-zero{ opacity:.45; }
.ts-sfil__done{
  width:100%;
  padding:10px;
  border:0;
  border-radius:var(--ts-r-sm);
  background:var(--ts-accent);
  color:var(--ts-accent-ink);
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.ts-sres__msg{ grid-column:1 / -1; margin:0; padding:30px 0; text-align:center; font-size:13px; color:var(--ts-text-soft); }

/* ô gợi ý trên trang 404 */
.ts-sugbox{
  max-width:520px;
  margin:0 auto 30px;
  padding:14px;
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-warn);
}
.ts-sugbox .ts-note{ margin:0; }

.ts-404__lead{ text-align:center; margin:0 0 12px; }
.ts-404__cats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:640px;
  margin:0 auto;
}
@media (min-width:768px){ .ts-404__cats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ts-cat404{
  padding:16px 6px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
  color:var(--ts-text-mid);
  font-size:12px;
  text-align:center;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-cat404:hover{ border-color:var(--ts-accent); transform:translateY(-2px); color:var(--ts-accent-text); }

.ts-404__acts{ display:flex; gap:10px; max-width:420px; margin:26px auto 0; }
.ts-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1;
  padding:12px 20px;
  border-radius:var(--ts-r-md);
  font-size:13.5px;
  font-weight:500;
  transition:filter .15s ease, background-color .15s ease;
}
.ts-btn--g{ background:#fff; color:var(--ts-text); border:1px solid var(--ts-line); }
.ts-btn--g:hover{ background:var(--ts-bg-alt); color:var(--ts-text); }
.ts-btn--p{ background:var(--ts-accent); color:var(--ts-accent-ink); border:0; }
.ts-btn--p:hover{ filter:brightness(.94); color:var(--ts-accent-ink); }


/* ==========================================================================
   A20. TRANG LEGO
   Số đo lấy từ bản dựng lego.html: .hero--lego .cat--lego .ban .orow .bud
   ========================================================================== */

/* ---- băng ảnh đầu trang ---- */
.ts-lslider{ padding:14px 0 0; }
@media (min-width:1024px){ .ts-lslider{ padding:18px 0 0; } }
.ts-lslider__box{
  position:relative;
  overflow:hidden;
  border-radius:var(--ts-r-lg);
  background:var(--ts-lego-card);
  aspect-ratio:16/9;
}
@media (min-width:768px){ .ts-lslider__box{ aspect-ratio:3/1; } }
.ts-lslider__track{ position:absolute; inset:0; }
.ts-lslide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease;
}
.ts-lslide.is-on{ opacity:1; visibility:visible; }
.ts-lslide img{ width:100%; height:100%; object-fit:cover; display:block; }

.ts-lslider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:none;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:var(--ts-lego-ink);
  cursor:pointer;
  transition:background-color .15s ease;
}
.ts-lslider__arrow:hover{ background:#fff; }
.ts-lslider__arrow--prev{ left:12px; }
.ts-lslider__arrow--next{ right:12px; }
.ts-lslider__box:hover .ts-lslider__arrow{ display:flex; }

.ts-lslider__dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:6px;
}
.ts-lslider__dots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:4px;
  background:rgba(255,255,255,.6);
  cursor:pointer;
  transition:width .2s ease, background-color .2s ease;
}
.ts-lslider__dots button.is-on{ width:22px; background:#fff; }

/* ---- khung chung các khối ---- */
/* Khoảng cách giữa các khối.
   Đệm 52px trên cộng 52px dưới thành 104px giữa hai khối — rộng hơn cả chiều
   cao một hàng thẻ, đọc bị đứt mạch. Hạ về 30px mỗi bên, tức 60px giữa hai
   khối liền nhau, ngang với khoảng cách các khối ở trang chủ. */
.ts-lsec{ padding:22px 0; }
@media (min-width:1024px){ .ts-lsec{ padding:30px 0; } }

/* Đường kẻ ngăn giữa hai khối liền nhau.
   Dùng dấu + nên chỉ kẻ khi thật sự có khối đứng ngay trước — khối nào bị ẩn
   vì chưa có danh mục thì không để lại đường thừa. */
.ts-lsec + .ts-lsec{ border-top:1px solid var(--ts-line); }
.ts-lsec--tight + .ts-lsec{ border-top:0; }

/* Nền cho từng khối, chọn trong Tuỳ chỉnh giao diện.
   Khối có nền thì bỏ đường kẻ vì màu đã đủ làm ranh giới. */
.ts-lsec--alt{ background:var(--ts-bg-alt); border-top:0 !important; }
.ts-lsec--alt + .ts-lsec{ border-top:0; }

.ts-lsec--lego{
  background:var(--ts-lego-bg);
  border-top:0 !important;
  border-bottom:1px solid var(--ts-lego-border);
}
.ts-lsec--lego + .ts-lsec{ border-top:0; }
.ts-lsec--lego .ts-lhead h2{ color:var(--ts-lego-ink); }
.ts-lsec--lego .ts-lsub{ color:var(--ts-lego-text); }
.ts-lsec--lego .ts-lmore{ color:var(--ts-warn); }
/* hàng bốn chấm stud trên tiêu đề, chỉ ở khối nền vàng */
.ts-lsec--lego .ts-lhead{ position:relative; padding-top:28px; }
.ts-lsec--lego .ts-lhead::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:88px;
  height:16px;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 8px at 8px 8px,  #E8B923 98%, transparent 100%),
    radial-gradient(circle 8px at 32px 8px, #D64545 98%, transparent 100%),
    radial-gradient(circle 8px at 56px 8px, #2B6CB0 98%, transparent 100%),
    radial-gradient(circle 8px at 80px 8px, #3B8A4E 98%, transparent 100%);
}

.ts-lsec--dark{
  background:var(--ts-dark);
  border-top:0 !important;
}
.ts-lsec--dark + .ts-lsec{ border-top:0; }
.ts-lsec--dark .ts-lhead h2{ color:#fff; }
.ts-lsec--dark .ts-lsub{ color:var(--ts-dark-text); }
.ts-lsec--dark .ts-lmore{ color:var(--ts-accent-lite); }
.ts-lhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.ts-lhead h2{
  margin:0;
  font-size:17px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3px;
}
@media (min-width:1024px){ .ts-lhead h2{ font-size:21px; } }
.ts-lmore{ font-size:12.5px; color:var(--ts-accent-text); white-space:nowrap; }
.ts-lmore:hover{ text-decoration:underline; }
.ts-lsub{ margin:-4px 0 14px; font-size:13px; line-height:1.65; color:var(--ts-text-soft); }

/* ---- duyệt theo dòng ---- */
.ts-lthemes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (min-width:768px){ .ts-lthemes{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
@media (min-width:1024px){ .ts-lthemes{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.ts-ltheme{
  padding:18px 10px;
  border:1px solid var(--ts-lego-border);
  border-radius:var(--ts-r-md);
  background:var(--ts-lego-card);
  color:var(--ts-lego-ink);
  font-size:12.5px;
  font-weight:500;
  text-align:center;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-ltheme:hover{ border-color:var(--ts-lego-line); transform:translateY(-2px); color:var(--ts-lego-ink); }

/* ---- hai banner ảnh ---- */
.ts-lbans{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
@media (min-width:768px){ .ts-lbans{ grid-template-columns:1fr 1fr; } }
.ts-lban{
  display:block;
  overflow:hidden;
  border-radius:var(--ts-r-lg);
  background:var(--ts-lego-card);
  transition:transform .15s ease;
}
.ts-lban:hover{ transform:translateY(-2px); }
.ts-lban img{ display:block; width:100%; height:auto; }

/* khối sát nhau, dùng cho hàng banner ngay dưới băng ảnh */
.ts-lsec--tight{ padding:12px 0 0; }
@media (min-width:1024px){ .ts-lsec--tight{ padding:14px 0 0; } }

/* ---- chọn quà theo ngân sách ---- */
.ts-lbudget{
  padding:30px 0;
  background:var(--ts-bg-alt);
  border-top:1px solid var(--ts-line);
  border-bottom:1px solid var(--ts-line);
}
@media (min-width:1024px){ .ts-lbudget{ padding:44px 0; } }
.ts-lbudget__t{
  margin:0 0 4px;
  font-size:17px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3px;
}
@media (min-width:1024px){ .ts-lbudget__t{ font-size:21px; } }
.ts-buds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:1024px){ .ts-buds{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.ts-bud{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:20px 16px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
  transition:border-color .15s ease, transform .15s ease;
}
.ts-bud:hover{ border-color:var(--ts-accent); transform:translateY(-2px); }
.ts-bud b{ font-size:15px; font-weight:500; color:var(--ts-text); }
.ts-bud span{ font-size:12px; color:var(--ts-text-faint); }

/* ---- câu hỏi hay gặp ---- */
.ts-lfaq{ padding:22px 0 40px; }
@media (min-width:1024px){ .ts-lfaq{ padding:30px 0 56px; } }
.ts-lfaq__t{
  margin:0 0 14px;
  font-size:17px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.3px;
}
@media (min-width:1024px){ .ts-lfaq__t{ font-size:21px; } }
.ts-faqs{ max-width:74ch; }
.ts-faq{ border-bottom:1px solid var(--ts-line-soft); }
.ts-faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  font-size:14px;
  font-weight:500;
  color:var(--ts-text);
}
.ts-faq summary::-webkit-details-marker{ display:none; }
.ts-faq summary::after{ content:'+'; color:var(--ts-text-faint); font-size:18px; font-weight:400; }
.ts-faq[open] summary::after{ content:'–'; }
.ts-faq > div{
  padding:0 0 16px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ts-text-soft);
}


/* ==========================================================================
   A21. TRANG GIỎ HÀNG
   Số đo lấy từ bản dựng gio-hang.html: .cartlay .line .qty .sum .ship .signin
   ========================================================================== */

.layout-cart{ padding:20px 0 40px; }
@media (min-width:1024px){ .layout-cart{ padding:28px 0 56px; } }

.ts-cart__t{
  margin:0 0 16px;
  font-size:24px;
  font-weight:500;
  line-height:1.25;
}
@media (min-width:1024px){ .ts-cart__t{ font-size:30px; } }
.ts-cart__t .ts-note{ display:inline; margin:0 0 0 6px; font-size:13px; }

/* ---- thanh miễn phí vận chuyển ---- */
.ts-ship{
  margin:0 0 20px;
  padding:14px;
  border:1px solid #F5E3C4;
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-warn);
}
.ts-ship[hidden]{ display:none; }
.ts-ship__txt{ font-size:13px; line-height:1.5; color:var(--ts-warn); }
.ts-ship__txt b{ color:var(--ts-accent-text); font-weight:600; }
.ts-ship__bar{
  height:5px;
  margin-top:9px;
  border-radius:3px;
  background:#E6EAF1;
  overflow:hidden;
}
.ts-ship__bar i{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--ts-accent);
  transition:width .3s ease;
}
.ts-ship.is-done{ border-color:#CFE8DF; background:var(--ts-ok-soft); }
.ts-ship.is-done .ts-ship__txt,
.ts-ship.is-done .ts-ship__txt b{ color:var(--ts-ok); }
.ts-ship.is-done .ts-ship__bar i{ background:var(--ts-ok); }

/* ---- mời đăng nhập ---- */
.ts-signin{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  padding:14px 16px;
  border:1px solid var(--ts-accent-soft);
  border-radius:var(--ts-r-md);
  background:var(--ts-accent-soft);
}
.ts-signin__b{ flex:1; min-width:200px; }
.ts-signin__t{ margin:0 0 3px; font-size:13.5px; font-weight:500; color:var(--ts-text); }
.ts-signin__s{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ts-text-soft); }
.ts-signin .ts-btn{ flex:0 0 auto; padding:9px 16px; font-size:12.5px; }
.ts-signin__note{ margin:0 0 20px; }

/* ---- bố cục hai cột ---- */
.ts-cartlay{ display:block; }
@media (min-width:1024px){
  .ts-cartlay{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:28px;
    align-items:start;
  }
}

/* ---- dòng hàng ---- */
.ts-line{ border-bottom:1px solid var(--ts-line-soft); }
.ts-line__in{ display:flex; gap:12px; padding:14px 0; }
.ts-line__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 62px;
  width:62px;
  height:62px;
  overflow:hidden;
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-alt);
}
.ts-line__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ts-line__b{ flex:1; min-width:0; }
.ts-line__n{
  display:block;
  font-size:13.5px;
  line-height:1.45;
  color:var(--ts-text);
}
.ts-line__n:hover{ color:var(--ts-accent-text); }
.ts-line__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:3px;
  font-size:11.5px;
  color:var(--ts-text-faint);
}
.ts-line__meta a{ color:var(--ts-text-faint); text-decoration:underline; }
.ts-line__meta a:hover{ color:var(--ts-sale); }
.ts-line__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.ts-line__p{ text-align:right; }
.ts-line__price{ display:block; font-size:14.5px; font-weight:500; color:var(--ts-text); }
.ts-line__unit{ display:block; margin-top:2px; font-size:11px; color:var(--ts-text-faint); }
.ts-line__disc{ margin:8px 0 0; padding:0; list-style:none; font-size:11.5px; color:var(--ts-ok); }

/* ---- ô tăng giảm số lượng ---- */
.ts-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-sm);
  overflow:hidden;
  background:#fff;
}
.ts-qty button{
  width:32px;
  height:32px;
  border:0;
  background:none;
  color:var(--ts-text-mid);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.ts-qty button:hover{ background:var(--ts-bg-alt); color:var(--ts-accent-text); }
.ts-qty input{
  width:40px;
  height:32px;
  border:0 !important;
  border-left:1px solid var(--ts-line) !important;
  border-right:1px solid var(--ts-line) !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:center;
  font-family:inherit;
  font-size:13px;
  color:var(--ts-text);
}

/* ---- ghi chú đơn hàng ---- */
.ts-cartnote{ padding:16px 0 0; }
.ts-cartnote label{
  display:block;
  margin-bottom:6px;
  font-size:12.5px;
  color:var(--ts-text-soft);
}
.ts-cartnote textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  font-family:inherit;
  font-size:13px;
  line-height:1.6;
  color:var(--ts-text);
  resize:vertical;
}
.ts-cartnote textarea:focus{ border-color:var(--ts-accent); outline:0; }

.ts-cart__back{
  display:inline-block;
  margin-top:18px;
  font-size:13px;
  color:var(--ts-accent-text);
}
.ts-cart__back:hover{ text-decoration:underline; }

/* ---- hộp tóm tắt ---- */
.ts-sum{
  margin-top:24px;
  padding:16px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#FDFDFC;
}
@media (min-width:1024px){
  .ts-sum{ margin-top:0; position:sticky; top:90px; }
}
.ts-sum__t{ margin:0 0 12px; font-size:15px; font-weight:500; }
.ts-sum__rows{ font-size:13px; color:var(--ts-text-soft); }
.ts-sum__row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.ts-sum__soft{ color:var(--ts-text-faint); }
.ts-sum__minus{ color:var(--ts-ok); }
.ts-sum__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--ts-line);
  font-weight:500;
}
.ts-sum__total .total-price{ font-size:22px; font-weight:500; color:var(--ts-accent-text); }
.ts-sum__foot{ margin-top:12px; }
.ts-sum__foot .ts-note{ margin:0; }
.ts-sum__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

/* số điểm đơn này sẽ tích, nằm trong hộp tóm tắt */
.ts-earn{
  margin:0 0 12px;
  padding:11px 12px;
  border-radius:var(--ts-r-md);
  background:var(--ts-ok-soft);
}
.ts-earn[hidden]{ display:none; }
.ts-earn__n{ margin:0; font-size:13px; line-height:1.55; color:var(--ts-text); }
.ts-earn__n b{ color:var(--ts-ok); font-weight:600; }
.ts-earn__s{ margin:3px 0 0; font-size:11.5px; line-height:1.6; color:var(--ts-text-soft); }
.ts-sum__chips span{
  padding:4px 9px;
  border-radius:4px;
  background:var(--ts-chip-bg);
  color:var(--ts-chip-text);
  font-size:11px;
}


/* ==========================================================================
   A22. TRANG TÀI KHOẢN VÀ ĐĂNG NHẬP
   Số đo lấy từ bản dựng tai-khoan.html: .acclay .acc .pts .order .tl .trk
   ========================================================================== */

.ts-accpage{ padding:20px 0 40px; }
@media (min-width:1024px){ .ts-accpage{ padding:28px 0 56px; } }

.ts-acclay{ display:block; }
@media (min-width:1024px){
  .ts-acclay{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
  .ts-accside{ position:sticky; top:90px; }
}
.ts-accmain{ min-width:0; margin-top:20px; }
@media (min-width:1024px){ .ts-accmain{ margin-top:0; } }

.ts-acc__t{ margin:0 0 16px; font-size:22px; font-weight:500; line-height:1.3; }
@media (min-width:1024px){ .ts-acc__t{ font-size:26px; } }
.ts-acc__t2{ margin:0; font-size:17px; font-weight:500; text-transform:uppercase; letter-spacing:.3px; }
.ts-acc__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:26px 0 12px;
}
.ts-accmain > .ts-acc__head:first-child,
.ts-acc__back + .ts-acc__head{ margin-top:8px; }
.ts-acc__head .ts-acc__t{ margin:0; }
.ts-acc__meta{ margin:0 0 16px; }
.ts-acc__back{ display:inline-block; margin-bottom:4px; }

/* ---- cột bên ---- */
.ts-acccard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 14px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  text-align:center;
}
.ts-avatar--lg{ flex:0 0 52px; width:52px; height:52px; font-size:20px; margin-bottom:4px; }
.ts-acccard__n{ font-size:14.5px; font-weight:500; color:var(--ts-text); }
.ts-acccard .ts-note{ margin:0; }

.ts-pts{
  margin-top:12px;
  padding:16px;
  border-radius:var(--ts-r-md);
  background:linear-gradient(135deg,#1E2A44 0%,#0F1729 100%);
  color:#fff;
}
.ts-pts__k{
  margin:0 0 2px;
  font-size:10.5px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ts-dark-text);
}
.ts-pts__tier{ margin:0 0 12px; font-size:20px; font-weight:500; line-height:1.25; color:var(--ts-accent-lite); }
.ts-pts__spent{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ts-pts__spent span{ font-size:12px; color:var(--ts-dark-text); }
.ts-pts__spent b{ font-size:15px; font-weight:500; color:#fff; }
.ts-pts__bar{
  height:5px;
  margin:12px 0 7px;
  border-radius:3px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
}
.ts-pts__bar i{ display:block; height:100%; max-width:100%; border-radius:3px; background:var(--ts-accent-lite); }
.ts-pts__note{ margin:0; font-size:11.5px; line-height:1.6; color:var(--ts-dark-text); }
.ts-pts__note b{ color:#fff; font-weight:500; }

.ts-pts__est{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
}
.ts-pts__est p{ margin:0; font-size:12.5px; line-height:1.6; color:#fff; }
.ts-pts__est p b{ color:var(--ts-accent-lite); font-weight:600; }
.ts-pts__est .ts-pts__fine{ margin-top:4px; font-size:11.5px; color:var(--ts-dark-text); }
.ts-pts__acts{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ts-pts__acts a{
  flex:1 1 auto;
  padding:8px 10px;
  border-radius:var(--ts-r-sm);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:12px;
  font-weight:500;
  text-align:center;
  white-space:nowrap;
}
.ts-pts__acts a:hover{ background:rgba(255,255,255,.18); color:#fff; }

/* bảng mức đổi thưởng trong thẻ hạng. Viết hai cấp để thắng .ts-pts__est p */
.ts-pts__rw{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); }
.ts-pts__est .ts-pts__rwk{
  margin:0 0 4px;
  font-size:10.5px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ts-dark-text);
}
.ts-pts__rw ul{ margin:0; padding:0; list-style:none; }
.ts-pts__rw li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 8px;
  margin:0;
  padding:6px 0;
  border-top:1px dashed rgba(255,255,255,.1);
  font-size:12px;
  line-height:1.5;
}
.ts-pts__rw li:first-child{ border-top:0; }
.ts-pts__rw li span{ color:#fff; }
.ts-pts__rw li b{ margin-left:auto; color:var(--ts-accent-lite); font-weight:600; }
.ts-pts__rw li em{ flex-basis:100%; font-style:normal; font-size:11px; color:var(--ts-dark-text); }

/* liên kết sang khối quyền lợi, trong thẻ hạng */
.ts-pts__lnk{ display:inline-block; margin-top:8px; font-size:12px; font-weight:500; color:var(--ts-accent-lite); }
.ts-pts__lnk:hover{ color:#fff; }

/* bảng quyền lợi các hạng, trang tài khoản.
   Dựng bằng lưới div chứ không dùng <table> để luật bảng của theme không chen vào.
   --n = số hạng, --tc = màu hạng hiện tại (Liquid điền), --lc = màu từng cột. */
#ts-tiers{ scroll-margin-top:90px; }
.ts-tgrid-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  background:#fff;
}
.ts-tgrid{
  display:grid;
  grid-template-columns:minmax(118px,1.7fr) repeat(var(--n,5), minmax(96px,1fr));
  font-size:13px;
  line-height:1.45;
}
.ts-tgrid > div{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
  border-bottom:1px solid var(--ts-line-soft);
  text-align:center;
  color:var(--ts-text);
}
.ts-tgrid > .ts-tgrid__lab{
  position:sticky;
  left:0;
  z-index:1;
  justify-content:flex-start;
  padding-left:14px;
  background:#fff;
  text-align:left;
  font-weight:500;
  color:var(--ts-text-mid);
  box-shadow:1px 0 0 var(--ts-line-soft);
}
/* hàng đầu: tên hạng */
.ts-tgrid > .ts-tgrid__h{
  flex-direction:column;
  justify-content:flex-start;
  gap:1px;
  padding:14px 8px 12px;
  border-bottom:1px solid var(--ts-line);
  border-top:3px solid transparent;
}
.ts-tgrid > .ts-tgrid__h.ts-tgrid__lab{
  justify-content:flex-end;
  align-items:flex-start;
  font-size:11px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
}
.ts-tgrid__h b{ font-size:14px; font-weight:600; line-height:1.3; color:var(--lc); white-space:nowrap; }
.ts-tgrid__h span{ font-size:11px; color:var(--ts-text-faint); white-space:nowrap; }
.ts-tgrid__h em{
  margin-top:5px;
  padding:1px 8px;
  border-radius:10px;
  background:var(--tc);
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:600;
  line-height:1.7;
  white-space:nowrap;
}
/* cột hạng hiện tại */
.ts-tgrid > .is-cur{ background:#F6F8FB; background:color-mix(in srgb, var(--tc) 7%, #fff); }
.ts-tgrid > .ts-tgrid__h.is-cur{ border-top-color:var(--tc); }
.ts-tgrid > .ts-tgrid__c.is-cur{ font-weight:500; }
/* ô giá trị */
.ts-tgrid__c{ font-size:12.5px; }
.ts-tgrid__ok{ color:var(--ts-ok); }
.ts-tgrid__no{ color:#C3C9D4; font-weight:600; }
/* giấu đường kẻ của dòng cuối dưới viền khung, số hạng bao nhiêu cũng đúng */
.ts-tgrid{ margin-bottom:-1px; }
.ts-tgrid__fine{ margin:10px 0 0; font-size:12px; line-height:1.6; }
.ts-tgrid__swipe{ display:none; margin:0 0 8px; font-size:12px; color:var(--ts-text-faint); }
@media (max-width:767px){
  .ts-tgrid__swipe{ display:block; }
  .ts-tgrid > .ts-tgrid__lab{ padding-left:12px; font-size:12.5px; }
}

.ts-accnav{
  display:flex;
  flex-direction:column;
  margin-top:12px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
  overflow:hidden;
}
.ts-accnav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  font-size:13px;
  color:var(--ts-text-mid);
}
.ts-accnav a + a{ border-top:1px solid var(--ts-line-soft); }
.ts-accnav a:hover{ background:var(--ts-bg-alt); color:var(--ts-accent-text); }
.ts-accnav a.on{ color:var(--ts-accent-text); font-weight:500; background:var(--ts-accent-soft); }
.ts-accnav a span{ color:var(--ts-text-faint); }
.ts-accnav__out{ color:var(--ts-text-faint) !important; }

/* ---- thông tin tài khoản ---- */
.ts-accinfo{
  display:grid;
  grid-template-columns:1fr;
  gap:12px 20px;
  padding:16px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
}
@media (min-width:768px){ .ts-accinfo{ grid-template-columns:1fr 1fr; } }
.ts-accinfo > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ts-accinfo span{ font-size:11.5px; color:var(--ts-text-faint); }
.ts-accinfo b{ font-size:13.5px; font-weight:500; color:var(--ts-text); overflow-wrap:anywhere; }
.ts-accinfo__wide{ grid-column:1 / -1; }
.ts-accinfo__edit{ grid-column:1 / -1; font-size:12.5px; color:var(--ts-accent-text); }

/* ---- thẻ đơn hàng ---- */
.ts-order{
  margin-bottom:12px;
  padding:16px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-lg);
  background:#fff;
}
.ts-order--gon{ padding:14px 16px; }
.ts-order__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ts-order__id{ font-size:14px; font-weight:500; color:var(--ts-text); }
.ts-order__id .ts-note{ display:inline; margin:0 0 0 2px; font-weight:400; }
.ts-order__sum{ margin:6px 0 0; }
.ts-order__sum a{ color:var(--ts-accent-text); }

.ts-pillst{
  flex-shrink:0;
  padding:4px 10px;
  border-radius:14px;
  background:var(--ts-accent-soft);
  color:var(--ts-accent-text);
  font-size:11.5px;
  font-weight:500;
  white-space:nowrap;
}
.ts-pillst.is-old{ background:var(--ts-ok-soft); color:var(--ts-ok); }
.ts-pillst.is-bad{ background:var(--ts-danger-soft); color:var(--ts-danger); }

/* dòng tiến độ bốn chặng */
.ts-tl{ margin:16px 0 4px; }
.ts-tl__bar{ display:flex; align-items:center; }
.ts-tl__bar i{
  flex:0 0 12px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#DDE3ED;
}
.ts-tl__bar i.done{ background:var(--ts-accent); }
.ts-tl__bar i.now{ box-shadow:0 0 0 4px var(--ts-accent-soft); }
.ts-tl__bar b{ flex:1; height:3px; margin:0 4px; border-radius:2px; background:#DDE3ED; }
.ts-tl__bar b.done{ background:var(--ts-accent); }
.ts-tl__lbl{ display:flex; justify-content:space-between; margin-top:8px; }
.ts-tl__lbl span{ font-size:11.5px; color:var(--ts-text-faint); }
.ts-tl__lbl span:nth-child(2){ margin-left:-8px; }
.ts-tl__lbl span.on{ color:var(--ts-accent-text); font-weight:500; }

/* vận chuyển */
.ts-trk{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px 28px;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:var(--ts-r-md);
  background:var(--ts-bg-alt);
}
.ts-trk dt{ margin:0 0 2px; font-size:11px; font-weight:400; color:var(--ts-text-faint); }
.ts-trk dd{ margin:0; font-size:13px; color:var(--ts-text); }
.ts-trk code{
  padding:2px 7px;
  border-radius:4px;
  background:#fff;
  border:1px solid var(--ts-line);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:12.5px;
  color:var(--ts-text);
}
.ts-trk__go{ margin-left:auto; }

/* danh sách hàng trong đơn */
.ts-order__items{ margin-top:14px; padding-top:14px; border-top:1px solid var(--ts-line-soft); }
.ts-oitem{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.ts-oitem:last-child{ margin-bottom:0; }
.ts-oitem__th{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  overflow:hidden;
  border-radius:var(--ts-r-sm);
  background:var(--ts-bg-alt);
}
.ts-oitem__th img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ts-oitem__b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ts-oitem__n{
  font-size:13px;
  line-height:1.45;
  color:var(--ts-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ts-oitem__b .ts-note{ margin:2px 0 0; }
.ts-oitem__p{ flex-shrink:0; font-size:13px; font-weight:500; color:var(--ts-text); }
.ts-order__more{ display:block; margin-top:8px; color:var(--ts-accent-text); }

.ts-order__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--ts-line-soft);
}
.ts-order__acts{ display:flex; gap:8px; flex-wrap:wrap; }
.ts-order__total{ font-size:16px; font-weight:500; color:var(--ts-accent-text); }
.ts-btn--sm{ flex:0 0 auto; padding:7px 13px; font-size:12.5px; }

/* chi tiết đơn */
.ts-obox{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:12px;
}
@media (min-width:768px){ .ts-obox{ grid-template-columns:1.4fr 1fr 1fr; } }
.ts-obox__i{
  padding:14px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-md);
}
.ts-obox__i > span{
  display:block;
  margin-bottom:6px;
  font-size:10.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--ts-text-faint);
}
.ts-obox__i b{ display:block; font-size:13.5px; font-weight:500; color:var(--ts-text); }
.ts-obox__i p{ margin:3px 0 0; font-size:12.5px; line-height:1.6; color:var(--ts-text-soft); }

.ts-ototal{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--ts-line-soft); font-size:13px; }
.ts-ototal div{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.ts-ototal dt{ font-weight:400; color:var(--ts-text-soft); }
.ts-ototal dd{ margin:0; color:var(--ts-text); }
.ts-ototal dd.is-minus{ color:var(--ts-ok); }
.ts-ototal__sum{ margin-top:8px; padding-top:10px !important; border-top:1px solid var(--ts-line); }
.ts-ototal__sum dt{ color:var(--ts-text); font-weight:500; }
.ts-ototal__sum dd{ font-size:18px; font-weight:500; color:var(--ts-accent-text); }

/* khối hỗ trợ cuối trang */
.ts-acchelp{
  padding:30px 0;
  background:var(--ts-bg-alt);
  border-top:1px solid var(--ts-line);
  text-align:center;
}
@media (min-width:1024px){ .ts-acchelp{ padding:44px 0; } }
.ts-acchelp .ts-lsub{ margin:6px auto 18px; max-width:52ch; }
.ts-acchelp__acts{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.ts-acchelp__acts .ts-btn{ flex:0 0 auto; }

/* ---- trang đăng nhập, đăng ký ---- */
.ts-authpage{ padding:30px 0 50px; background:var(--ts-bg-alt); }
@media (min-width:1024px){ .ts-authpage{ padding:48px 0 72px; } }
.ts-authbox{
  max-width:420px;
  margin:0 auto;
  padding:26px 22px;
  border:1px solid var(--ts-line);
  border-radius:var(--ts-r-lg);
  background:#fff;
}
.ts-authbox--inline{ max-width:440px; margin:0; }
.ts-authbox__t{ margin:0 0 4px; font-size:22px; font-weight:500; text-align:center; }
.ts-authbox__s{ margin:0 0 20px; font-size:13px; color:var(--ts-text-soft); text-align:center; }
.ts-authbox__s a{ color:var(--ts-accent-text); font-weight:500; }
.ts-authbox--inline .ts-authbox__t,
.ts-authbox--inline .ts-authbox__s{ text-align:left; }
.ts-authbox__btn{ width:100%; margin-top:6px; padding:12px 20px; }
.ts-authbox__link{
  display:block;
  margin:14px auto 0;
  padding:0;
  border:0;
  background:none;
  color:var(--ts-accent-text);
  font-family:inherit;
  font-size:12.5px;
  text-align:center;
  cursor:pointer;
}
.ts-authbox__link:hover{ text-decoration:underline; }
.ts-authbox [hidden]{ display:none; }

.ts-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ts-field{ display:block; margin:0 0 12px; }
.ts-field > span{ display:block; margin-bottom:5px; font-size:12px; color:var(--ts-text-soft); }

.ts-formerr, .ts-formok{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:var(--ts-r-sm);
  font-size:12.5px;
  line-height:1.6;
}
.ts-formerr{ background:var(--ts-danger-soft); color:var(--ts-danger); }
.ts-formok{ background:var(--ts-ok-soft); color:var(--ts-ok); }

.ts-social-login{ margin-top:22px; padding-top:18px; border-top:1px solid var(--ts-line-soft); text-align:center; }
.ts-social-login__or{ display:block; margin-bottom:12px; font-size:11.5px; color:var(--ts-text-faint); }


/* ==========================================================================
   PHẦN B — ĐÈ LÊN THEME
   Từ đây trở xuống bắt buộc dùng html + !important.
   ========================================================================== */

/* ------------------------------------------------ B1. NỀN TẢNG VÀ CHỮ */
html body{
  font-family:var(--ts-font) !important;
  color:var(--ts-text) !important;
  background:var(--ts-bg) !important;
  -webkit-font-smoothing:antialiased !important;
  line-height:1.6 !important;
}
html h1, html h2, html h3, html h4, html h5, html h6,
html .title-head, html .title-product, html .title_heads{
  font-family:var(--ts-font) !important;
  font-weight:500 !important;
  color:var(--ts-text) !important;
  letter-spacing:0 !important;
}
html a:hover{ color:var(--ts-accent-text) !important; }
html :focus-visible{ outline:2px solid var(--ts-accent-text) !important; outline-offset:2px !important; }

/* khối nền tối — chữ phải trắng, đè lại luật màu chữ chung ở trên */
html .ts-choice h2,
html .ts-choice .ts-choice__title{ color:#fff !important; }
html .ts-choice .ts-choice__lede{ color:var(--ts-dark-text) !important; }
html .ts-choice .ts-vid__info b{ color:#fff !important; }
html .ts-choice .ts-choice__cap b{ color:#fff !important; }

/* -------------------------------------------------------------- B2. NÚT */
html .btn, html .btn-primary, html .btn_base, html .btn-lienhe, html .btn-home{
  font-family:var(--ts-font) !important;
  font-weight:500 !important;
  border-radius:var(--ts-r-md) !important;
}
html .btn-primary, html .btn_base.normal_button, html .btn-lienhe, html .btn-home{
  background:var(--ts-accent) !important;
  border-color:var(--ts-accent) !important;
  color:var(--ts-accent-ink) !important;
}
html .btn-primary:hover, html .btn_base.normal_button:hover{ filter:brightness(.93) !important; }

/* --------------------------------------------------- B3. HEADER CỦA THEME */
html .header .main-header{ background:var(--ts-dark) !important; }
html .header-menu{ background:var(--ts-dark-2) !important; }
html .header-search-form .form-control{
  border:0 !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-radius:var(--ts-r-sm) !important;
  height:42px !important;
  font-size:14px !important;
}
html .sudes-header-cart .count_item{
  background:var(--ts-sale) !important;
  color:var(--ts-sale-ink) !important;
  font-weight:500 !important;
}

/* ------------------------- B4. TIÊU ĐỀ CÁC KHỐI CÒN LẠI CỦA THEME
   Chỉ còn section_category, section_3_banner, section_blog, section_services
   dùng khuôn cũ. */
html .section-index .section-title{
  text-align:left !important;
  border:0 !important;
  margin-bottom:16px !important;
}
html .section-index .section-title h2{
  background:none !important;
  text-align:left !important;
  padding:0 !important;
  margin:0 !important;
  font-size:19px !important;
  font-weight:600 !important;
  color:var(--ts-text) !important;
}
html .section_product_tab .tab_big{ display:none !important; }
html .section_category .cate-item .box-cate{
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  padding:14px 8px 12px !important;
}
html .section_category .cate-item .cate-name{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--ts-text-mid) !important;
  margin:9px 0 0 !important;
}
@media (min-width:1024px){
  html .section-index .section-title h2{ font-size:22px !important; }
}

/* -------------------------------------------------- B5. TRANG DANH MỤC
   Gộp từ hai chỗ của bản v5: mục B5 cũ và khối [PHẦN B] nằm trong A14 cũ.
   Bản v5 khai cả .dqdt-sidebar trần lẫn .ts-col .dqdt-sidebar với thông số
   khác nhau; ở đây giữ bản mới hơn và đổi phạm vi sang .layout-collection
   vì collection.bwt không còn dùng bộ class ts-col.
   Đã bỏ hai luật chết: .col-title h1 và .col-banner img — cả hai khối đó
   không còn trong template.
   ========================================================================== */

/* --- dải navy đầu trang ---
   B1 ép mọi h1 h2 h3 về màu chữ đen bằng !important, nên tiêu đề trong dải
   navy phải giành lại ở đây. Đặt trong phần A là thua về thứ tự. */
html .ts-colhero .ts-colhero__title{ color:#fff !important; }

/* --- số cột lưới sản phẩm, theo bản dựng: 2 / 3 / 4 --- */
@media (min-width:768px) and (max-width:1199px){
  html .layout-collection .category-products .row > [class*="col-"],
  html .layout-collection .products-view .row > [class*="col-"]{
    flex:0 0 33.3333% !important;
    max-width:33.3333% !important;
  }
}
@media (min-width:1200px){
  html .layout-collection .category-products .row > [class*="col-"],
  html .layout-collection .products-view .row > [class*="col-"]{
    flex:0 0 25% !important;
    max-width:25% !important;
  }
}

/* --- cột lọc: bản dựng cho MỖI NHÓM một hộp viền riêng, không phải một
       hộp lớn bao tất cả. Tiêu đề nhóm chữ thường 12.5px, không in hoa. --- */
html .layout-collection .dqdt-sidebar .section-box-bg{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  padding:0 !important;
}
html .layout-collection .dqdt-sidebar .aside-item{
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
  padding:14px !important;
  margin:0 0 12px !important;
}
html .layout-collection .dqdt-sidebar .aside-title{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
html .layout-collection .dqdt-sidebar h2,
html .layout-collection .dqdt-sidebar .title-head{
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--ts-text) !important;
  margin:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
html .layout-collection .dqdt-sidebar .aside-content{
  margin:0 !important;
  padding:0 !important;
}
html .layout-collection .dqdt-sidebar .aside-content ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
html .layout-collection .dqdt-sidebar .filter-item{
  margin:0 !important;
  padding:0 !important;
}
html .layout-collection .dqdt-sidebar .filter-item label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:var(--ts-text-mid) !important;
  padding:4px 0 !important;
  margin:0 !important;
  cursor:pointer !important;
}
html .layout-collection .dqdt-sidebar .filter-item label:hover{ color:var(--ts-accent-text) !important; }
/* Theme vẽ ô tick bằng thẻ <i class="fa">, còn input thật thì giấu. Khi đặt
   label thành flex, input thật hiện ra thành một vạch mỏng chen giữa chữ. */
html .layout-collection .dqdt-sidebar .filter-item label input[type="checkbox"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
html .layout-collection .dqdt-sidebar .filter-item label i.fa{
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  border:1px solid var(--ts-line) !important;
  border-radius:4px !important;
  background:#fff !important;
  position:relative !important;
  display:inline-block !important;
}
html .layout-collection .dqdt-sidebar .filter-item label i.fa::before,
html .layout-collection .dqdt-sidebar .filter-item label i.fa::after{ content:none !important; }
html .layout-collection .dqdt-sidebar .filter-item label input:checked + i.fa{
  background:var(--ts-accent) !important;
  border-color:var(--ts-accent) !important;
}
html .layout-collection .dqdt-sidebar .filter-item label input:checked + i.fa::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  top:1px !important;
  width:4px !important;
  height:9px !important;
  border:solid #fff !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}
/* Số đếm bên phải. Script trong collection.bwt đặt <em class="ts-fc"> NGAY SAU
   label (không nằm trong label, để tên chip "Bạn chọn" không dính số), nên
   span bọc ngoài phải thành hàng ngang và label giãn hết phần còn lại. */
html .layout-collection .dqdt-sidebar .filter-item > span{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
html .layout-collection .dqdt-sidebar .filter-item > span > label{ flex:1 1 auto !important; min-width:0 !important; }
html .layout-collection .dqdt-sidebar .filter-item em.ts-fc{
  flex-shrink:0 !important;
  margin-left:auto !important;
  font-style:normal !important;
  font-size:11.5px !important;
  color:var(--ts-text-faint) !important;
}
html .layout-collection .dqdt-sidebar .filter-item em.ts-fc:empty{ display:none !important; }
/* lựa chọn về 0 thì mờ đi nhưng vẫn bấm được */
html .layout-collection .dqdt-sidebar .filter-item.ts-f0 label,
html .layout-collection .dqdt-sidebar .filter-item.ts-f0 em.ts-fc{ opacity:.45 !important; }
/* Nhóm nào quá dài thì cuộn trong khung. Danh mục Chuột đang có 29 hãng. */
html .layout-collection .filter-vendor .aside-content ul,
html .layout-collection .filter-type .aside-content ul{
  max-height:260px !important;
  overflow-y:auto !important;
  padding-right:4px !important;
}
/* Cột lọc hiện từ 1200px — đúng mốc theme vốn giả định. Từ mốc đó ẩn nút đóng
   ngăn kéo, và chặn luôn lớp phủ xám mà theme bật khi mở ngăn kéo lọc. */
@media (min-width:1200px){
  html .layout-collection .close-filters{ display:none !important; }
  /* Hàm lọc của theme bật lớp phủ ngăn kéo mà không xét khổ màn hình, nên trên
     máy tính bấm một ô lọc là cả trang bị phủ xám. Tên class lấy từ chính
     clearAllFiltered() nên chắc chắn đúng. */
  html .backdrop__body-backdrop___1rvky{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  /* Cùng hàm đó còn bật tắt class active trên cột lọc — trên máy tính cột lọc
     luôn phải hiện, bất kể class ấy đang bật hay tắt. */
  html .layout-collection .left-content{
    display:block !important;
    position:static !important;
    transform:none !important;
    visibility:visible !important;
  }
  /* KHÔNG đặt overflow lên body ở đây. Luật cũ ghi html body{overflow:auto}
     để gỡ khoá cuộn khi mở ngăn kéo lọc, nhưng nó áp cho mọi trang và biến
     body thành vùng cuộn riêng — mọi thẻ position:sticky trong site đều hỏng.
     Chỉ gỡ khoá đúng lúc theme khoá, tức khi có class trên body. */
  html body.opacity_menu_show,
  html body.filter-open{ overflow:auto !important; }
}

/* --- thanh sắp xếp --- */
html .layout-collection .filter-containers{
  border-bottom:1px solid var(--ts-line) !important;
  margin-bottom:16px !important;
  padding-bottom:0 !important;
}
/* Nút "Bộ lọc" chỉ để mở ngăn kéo trên máy nhỏ, cột lọc hiện thì ẩn nó đi */
@media (min-width:1200px){
  html .layout-collection .sort-cate .sudes-filter{ display:none !important; }
}
html .layout-collection .sort-cate-right h3{
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--ts-text-soft) !important;
  margin:0 !important;
}
html .layout-collection .sort-cate-right ul li a{
  border-radius:18px !important;
  font-size:12.5px !important;
}

/* --- khoảng cách lưới: 14px đều cả ngang lẫn dọc như bản dựng.
       Bootstrap chỉ chừa khoảng ngang, hàng dưới dính sát hàng trên. --- */
html .layout-collection .category-products .row,
html .layout-collection .products-view .row{
  margin-left:-7px !important;
  margin-right:-7px !important;
}
html .layout-collection .category-products .row > [class*="col-"],
html .layout-collection .products-view .row > [class*="col-"]{
  padding-left:7px !important;
  padding-right:7px !important;
  margin-bottom:14px !important;
}

/* --- phân trang --- */
html .layout-collection .pagenav{
  margin-top:18px !important;
  padding-top:0 !important;
}
html .pagenav .pagination a, html .paginate-pages a{
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-sm) !important;
  color:var(--ts-text-mid) !important;
}
html .pagenav .pagination .active a, html .paginate-pages .active a{
  background:var(--ts-accent) !important;
  border-color:var(--ts-accent) !important;
  color:#fff !important;
}

/* --- thẻ sản phẩm của theme, dùng ở trang danh mục --- */
/* Các lớp bên trong thẻ không được có viền hay đổ bóng riêng, nếu không sẽ
   thành khung lồng khung. Viền chỉ nằm ở .item_product_main. */
html .item_product_main form.variants,
html .item_product_main .product-action,
html .item_product_main .product-thumbnail,
html .item_product_main .product-info,
html .item_product_main .product-price-cart,
html .item_product_main .price-box{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
html .item_product_main{
  position:relative !important;
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-lg) !important;
  overflow:hidden !important;
  height:100% !important;
}
/* Thẻ form bên trong mới là thứ chứa nhãn giảm giá. Không đặt mốc định vị ở
   đây thì nhãn bám vào tổ tiên xa hơn và trồi lên trên mép thẻ. */
html .item_product_main .item-product-main,
html .item_product_main form.variants{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  margin:0 !important;
}
html .item_product_main .product-info{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
html .item_product_main .product-price-cart{ margin-top:auto !important; }
html .item_product_main .tag-soldout::before,
html .item_product_main .tag-soldout::after{ display:none !important; content:none !important; }
html .item_product_main .tag-soldout{
  position:absolute !important;
  top:8px !important; right:8px !important; left:auto !important;
  z-index:2 !important;
  background:var(--ts-bg-alt) !important;
  color:var(--ts-text-faint) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  padding:3px 8px !important;
  border-radius:5px !important;
  box-shadow:none !important;
}
html .item_product_main .product-thumbnail{
  background:var(--ts-bg-alt) !important;
  aspect-ratio:1/1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
html .item_product_main .product-thumbnail img{
  max-height:100% !important; width:auto !important; object-fit:contain !important;
}
html .item_product_main .product-info{ padding:11px 12px 13px !important; }
html .item_product_main .ts-vendor{
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  color:var(--ts-text-faint) !important;
  margin:0 0 4px !important;
}
html .item_product_main .product-name{
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  margin:0 0 8px !important;
  min-height:2.9em !important;
}
html .item_product_main .product-info .tick-tag:empty{ display:none !important; }
html .item_product_main .product-info .tick-tag{
  display:flex !important; flex-wrap:wrap !important; gap:4px !important;
  margin:0 0 8px !important; padding:0 !important; position:static !important;
}
html .item_product_main .product-info .tick-tag span{
  background:var(--ts-chip-bg) !important;
  color:var(--ts-chip-text) !important;
  font-size:10px !important;
  font-weight:500 !important;
  padding:3px 7px !important;
  border-radius:4px !important;
  border:0 !important;
  box-shadow:none !important;
}
html .item_product_main .price-box{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
}
html .item_product_main .price-box .price{
  order:1 !important; font-size:14.5px !important; font-weight:500 !important; color:var(--ts-text) !important;
}
html .item_product_main .price-box .compare-price{
  order:2 !important; font-size:11.5px !important; color:#9AA3B4 !important;
}
html .item_product_main .price-box .compare-price + .price{ color:var(--ts-accent-text) !important; }
html .item_product_main .flash-sale{
  position:absolute !important;
  top:8px !important; left:8px !important; right:auto !important;
  background:var(--ts-sale) !important;
  color:var(--ts-sale-ink) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  padding:3px 8px !important;
  border-radius:5px !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html .item_product_main .btn-cart{
  background:var(--ts-accent-soft) !important;
  color:var(--ts-accent-text) !important;
  border:0 !important;
  border-radius:var(--ts-r-sm) !important;
}
/* Chân thẻ: cột trái xếp dọc giá, giá gạch, dòng tình trạng — nút giỏ bên phải.
   Dòng tình trạng nằm chung khối với giá nên phải đặt order 3, không thì nó
   rơi lên trên giá. */
html .item_product_main .product-price-cart{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-top:auto !important;
}
/* Chừa sẵn chỗ cho dòng giá gạch. Không chừa thì thẻ có giảm giá cao hơn thẻ
   không giảm, dòng giá giữa các thẻ trong cùng hàng lệch nhau. */
html .item_product_main .price-box{
  min-height:2.7em !important;
  justify-content:flex-start !important;
}
html .item_product_main .ts-stat{
  order:3 !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  font-size:11px !important;
  line-height:1.5 !important;
  margin-top:6px !important;
  min-height:1.5em !important;
}
html .item_product_main .ts-stat--ok{ color:var(--ts-ok) !important; }
html .item_product_main .ts-stat--lo{ color:var(--ts-danger) !important; }
html .item_product_main .ts-stat--out{ color:var(--ts-text-faint) !important; }

/* ------------------------------------------------- B6. TRANG SẢN PHẨM */
/* Bản dựng chia hai cột. Live chia ba cột 4/5/3, nên thay vì cắt ghép markup
   thì cho cột thứ ba rớt xuống dòng dưới rồi đẩy sang phải cho thẳng cột giữa. */
@media (min-width:992px){
  html .details-product > .row.margin-bottom-30 > .product-detail-left{
    flex:0 0 42% !important; max-width:42% !important;
  }
  html .details-product > .row.margin-bottom-30 > .details-pro{
    flex:0 0 58% !important; max-width:58% !important;
  }
  /* Cột thứ ba được script chuyển vào trong cột giữa. Trường hợp script chưa
     chạy thì nó vẫn rớt xuống dòng dưới và được đẩy sang phải cho thẳng cột. */
  html .details-product > .row.margin-bottom-30 > .product-col-right{
    flex:0 0 58% !important; max-width:58% !important;
    margin-left:42% !important;
    margin-top:22px !important;
  }
}
/* khi đã nằm trong cột giữa thì chiếm trọn bề ngang cột */
html .layout-product .details-pro .product-col-right{
  flex:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:22px 0 0 !important;
  padding:0 !important;
}
/* ---- cụm chữ đầu trang sản phẩm ----
   Bản dựng: một dòng hãng · mã nhỏ, rồi tên lớn, rồi hàng chip, rồi giá.
   Theme cũ chèn thêm dòng "Mã:" riêng và dòng "Tình trạng:" riêng — dòng Mã
   gộp lên trên, dòng Tình trạng thu nhỏ lại cho khỏi cạnh tranh với tên. */
html .layout-product .title-product{
  font-size:24px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  margin:0 0 10px !important;
  letter-spacing:-.01em !important;
}
@media (min-width:1024px){
  /* Bản dựng ghi 38px với tên mẫu ba chữ. Tên hàng thật dài gấp ba nên để 32px,
     muốn đúng bản dựng thì đổi số này thành 38px. */
  html .layout-product .title-product{ font-size:32px !important; }
}
/* dòng "Mã: ..." của theme — mã đã gộp lên dòng hãng phía trên tên */
html .layout-product .product-top .sku-product{ display:none !important; }
html .layout-product .product-top{ margin:0 !important; padding:0 !important; }
/* Dòng tình trạng: ẩn sẵn, chỉ hiện khi HẾT hàng.
   Sản phẩm còn hàng không cần nhắc — tình trạng từng màu đã ghi dưới mỗi ô
   biến thể rồi. Script gắn class ts-out khi hết hàng. */
html .layout-product .inventory_quantity{ display:none !important; }
html .layout-product .inventory_quantity.ts-out{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  width:fit-content !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--ts-danger) !important;
  background:var(--ts-danger-soft) !important;
  border:0 !important;
  border-radius:var(--ts-r-sm) !important;
  padding:7px 12px !important;
  margin:0 0 12px !important;
}
html .layout-product .inventory_quantity.ts-out .a-stock{ color:inherit !important; }
html .layout-product .sku-product{ font-size:12.5px !important; color:var(--ts-text-faint) !important; }
html .layout-product .inventory_quantity{
  font-size:13px !important;
  color:var(--ts-text-mid) !important;
  padding:10px 0 !important;
  border-top:1px solid var(--ts-line-soft) !important;
  border-bottom:1px solid var(--ts-line-soft) !important;
  margin:12px 0 !important;
}
html .layout-product .a-stock{ color:var(--ts-ok) !important; font-weight:500 !important; }
html .layout-product .special-price .product-price{
  font-size:30px !important; font-weight:500 !important; color:var(--ts-accent-text) !important;
  line-height:1.2 !important;
}
@media (min-width:1024px){
  html .layout-product .special-price .product-price{ font-size:34px !important; }
}
html .layout-product .old-price .product-price-old{ font-size:15px !important; color:#9AA3B4 !important; }
/* ---- khung ảnh ----
   Bản dựng dùng khung vuông 1:1 nền xám, ảnh canh giữa và không bị cắt. */
html .layout-product .gallery-top{
  aspect-ratio:1/1 !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-lg) !important;
  overflow:hidden !important;
  background:var(--ts-bg-alt) !important;
}
html .layout-product .gallery-top .swiper-wrapper{ height:100% !important; }
html .layout-product .gallery-top .swiper-slide{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  padding:18px !important;
}
html .layout-product .gallery-top .swiper-slide img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
/* hàng ảnh nhỏ: ô vuông nền xám, ô đang xem viền cobalt */
html .layout-product .gallery-thumbs{ margin-top:10px !important; }
html .layout-product .gallery-thumbs .swiper-slide{
  border:0 !important;
  padding:0 !important;
}
html .layout-product .gallery-thumbs .swiper-slide .p-100{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:1/1 !important;
  height:auto !important;
  padding:6px !important;
  overflow:hidden !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-sm) !important;
  background:var(--ts-bg-alt) !important;
}
html .layout-product .gallery-thumbs .swiper-slide img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
html .layout-product .gallery-thumbs .swiper-slide-thumb-active .p-100{
  border:2px solid var(--ts-accent) !important;
  padding:5px !important;
}
/* ---- ô chọn biến thể (snippet swatch) ----
   Bản dựng: các ô xếp hàng ngang chia đều, ô đang chọn viền cobalt 2px,
   dưới mỗi ô có dòng còn hàng hay hết hàng. */
html .layout-product .swatch{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 16px !important;
}
@media (min-width:576px){
  html .layout-product .swatch{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
html .layout-product .swatch .header{
  grid-column:1 / -1 !important;
  margin:0 0 -2px !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--ts-text) !important;
}
@media (min-width:1024px){
  html .layout-product .swatch .header{ font-size:16px !important; }
}
html .layout-product .swatch .header .value-roperties{
  color:var(--ts-text-soft) !important;
  font-weight:400 !important;
}
html .layout-product .swatch .swatch-element{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
/* input radio bị giấu, cả ô là vùng bấm */
html .layout-product .swatch .swatch-element input[type="radio"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  margin:0 !important;
}
html .layout-product .swatch .swatch-element label{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:58px !important;
  margin:0 !important;
  padding:12px 10px !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
  color:var(--ts-text) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  text-align:center !important;
  cursor:pointer !important;
}
html .layout-product .swatch .swatch-element label:hover{ border-color:#CBD2DE !important; }
html .layout-product .swatch .swatch-element input:checked + label{
  border:2px solid var(--ts-accent) !important;
  padding:11px 9px !important;
}
/* ảnh gạch chéo của theme bỏ đi, thay bằng dòng chữ như bản dựng */
html .layout-product .swatch .crossed-out{ display:none !important; }
html .layout-product .swatch .swatch-element.available label::after{
  content:"Còn hàng" !important;
  display:block !important;
  margin-top:4px !important;
  font-size:11px !important;
  color:var(--ts-ok) !important;
}
html .layout-product .swatch .swatch-element.soldout label{
  color:#9AA3B4 !important;
  cursor:not-allowed !important;
}
html .layout-product .swatch .swatch-element.soldout label::after{
  content:"Hết hàng" !important;
  display:block !important;
  margin-top:4px !important;
  font-size:11px !important;
  color:var(--ts-text-faint) !important;
}
/* ts-swatch-wrap: tên phân loại dài thì xuống dòng trong nút, không tràn ra ngoài.
   Theme gốc (product_style) đặt white-space:nowrap cho nhãn phân loại. */
html .layout-product .swatch .swatch-element label{
  white-space:normal !important;
  text-align:center !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere !important;
  min-width:0 !important;
  height:auto !important;      /* theme gốc đặt height:30px, tên 3 dòng sẽ lòi ra ngoài viền */
  max-height:none !important;
  overflow:visible !important;
}
html .layout-product .swatch .swatch-element{ height:auto !important; }
/* ô nút trong lưới kéo cao bằng nhau theo nút cao nhất của hàng */
html .layout-product .swatch .swatch-element label{ box-sizing:border-box !important; }
html .layout-product .swatch{ align-items:stretch !important; }
html .layout-product .swatch .swatch-element > label{ min-height:100% !important; }
/* ô xổ xuống mà OptionSelectors tự sinh — swatch đã thay thế, giấu đi */
html .layout-product .select-swatch + .box-variant .selector-wrapper,
html .layout-product .swatch + .selector-wrapper{ display:none !important; }
html .layout-product .btn-mua{
  width:100% !important;
  display:flex !important;
  gap:10px !important;
}
/* hai nút mua chia đôi đều nhau như bản dựng */
html .layout-product .btn-mua .btn-buyNow,
html .layout-product .btn-mua .btn_add_cart{
  flex:1 1 0 !important;
  min-width:0 !important;
}
/* Mô tả ngắn đã chuyển sang cột trái làm khối điểm mạnh, bản gốc trong cột
   giữa phải giấu đi kẻo hiện hai lần. */
html .layout-product .form-product .product-summary{ display:none !important; }
/* ---- các mục của theme cũ không có trong bản dựng, đã chốt bỏ ----
   Chỉ ẩn chứ không xoá markup, muốn bật lại thì xoá luật tương ứng. */
html .layout-product .gr-wish-compare{ display:none !important; }   /* yêu thích + so sánh */
html .layout-product .blog_noibat{ display:none !important; }        /* tin tức nổi bật cột phải */
html .layout-product .banner-product-box{ display:none !important; } /* banner dưới khung ảnh */
/* Ô số lượng. Thẻ input #qtym vẫn phải nằm trong form để đơn hàng có số lượng,
   nên chỉ ẩn khung bao chứ không bỏ thẻ. */
html .layout-product .custom-btn-number{ display:none !important; }
html .layout-product .flex-quantity{ display:block !important; }

html .layout-product .block-policy{ display:none !important; }

/* Vạch ngăn dưới khối mua hàng. Sản phẩm nào không có video và không có mua kèm
   thì phần dưới dính liền vào khu vực mua, đọc bị lẫn. */
html .details-product > .row.margin-bottom-30{
  margin-bottom:0 !important;
  padding-bottom:30px !important;
  border-bottom:1px solid var(--ts-line) !important;
}
@media (min-width:1024px){
  html .details-product > .row.margin-bottom-30{ padding-bottom:44px !important; }
}

/* ---- tiêu đề các khối cuối trang ----
   "Bạn đã xem" do snippet của theme dựng nên đang in đậm, lệch hẳn với các
   tiêu đề khác. Kéo hết về một kiểu. Loại trừ h2 nằm trong nội dung mô tả và
   trong khối khuyến mại — đó là chữ của người viết, không được đụng vào. */
html .layout-product h2:not(.ba-text-fpt h2):not(.rte h2):not(.promo-content h2):not(.ts-specs h2),
html .layout-product .product-swipers > h3,
html .layout-product .product-viewed > h3,
html .layout-product .section-product-viewed > h3{
  font-size:17px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  color:var(--ts-text) !important;
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
}
html .layout-product h2 a{ color:inherit !important; }

/* Khối "Bạn đã xem" của theme đặt cỡ chữ và độ đậm lên thẻ <span> BÊN TRONG
   h2, nên luật nhắm vào h2 không với tới được. Phải nhắm thẳng vào span. */
html .layout-product .section-viewed-product h2,
html .layout-product .section-viewed-product h2 span,
html .layout-product .recent-page-viewed h2,
html .layout-product .recent-page-viewed h2 span,
html .layout-product h2 > span{
  font-size:17px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  color:var(--ts-text) !important;
}
html .layout-product .section-viewed-product h2,
html .layout-product .recent-page-viewed h2{
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
}
@media (min-width:1024px){
  html .layout-product .section-viewed-product h2,
  html .layout-product .section-viewed-product h2 span,
  html .layout-product .recent-page-viewed h2,
  html .layout-product .recent-page-viewed h2 span,
  html .layout-product h2 > span{ font-size:21px !important; }
}
@media (min-width:1024px){
  html .layout-product h2:not(.ba-text-fpt h2):not(.rte h2):not(.promo-content h2):not(.ts-specs h2),
  html .layout-product .product-swipers > h3,
  html .layout-product .product-viewed > h3,
  html .layout-product .section-product-viewed > h3{
    font-size:21px !important;
  }
}

/* ---- khối mô tả sản phẩm ----
   Bản dựng: chỉ có tiêu đề rồi tới chữ, không có khung thẻ bao ngoài,
   tiêu đề chữ thường 17/21px chứ không phải thanh chữ in hoa. */
html .layout-product .ts-pmid .block-content,
html .layout-product .ts-reviews .block-content{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
html .layout-product .ts-pmid .block-content > .title,
html .layout-product .ts-reviews .block-content > .title{
  font-size:17px !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  color:var(--ts-text) !important;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 12px !important;
}
@media (min-width:1024px){
  html .layout-product .ts-pmid .block-content > .title,
  html .layout-product .ts-reviews .block-content > .title{ font-size:21px !important; }
}
html .layout-product .ba-text-fpt{
  font-size:14px !important;
  line-height:1.8 !important;
  color:var(--ts-text-mid) !important;
}
html .layout-product .ba-text-fpt img{ border-radius:var(--ts-r-md) !important; }
/* nút Xem thêm: bản dựng không có trên máy tính, chữ đầy đủ luôn */
html .layout-product .show-more{ text-align:center !important; margin-top:14px !important; }
html .layout-product .btn--view-more{
  display:inline-flex !important;
  align-items:center !important;
  padding:12px 20px !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
  color:var(--ts-text) !important;
  font-size:13.5px !important;
  font-weight:500 !important;
}
html .layout-product .btn--view-more:hover{ background:var(--ts-bg-alt) !important; }
/* KHÔNG bỏ giới hạn chiều cao khối mô tả trên máy tính.
   Theme đặt chiều cao CỐ ĐỊNH cho khung này rồi dùng nút Xem thêm để bung.
   Ghi đè overflow:visible sẽ làm nội dung trào ra ngoài khung và đè lên bảng
   thông số, khối đánh giá và chân trang. Bản dựng hiện đủ nội dung, nhưng đổi
   lấy việc đó thì phải sửa cả JS bung khối của theme, chưa đáng. */

/* ---- bảng thông số kỹ thuật ---- */
html .layout-product .ts-specs table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:13px !important;
  border:0 !important;
}
html .layout-product .ts-specs table,
html .layout-product .ts-specs table tbody,
html .layout-product .ts-specs table tr{
  background:none !important;
  border:0 !important;
}
html .layout-product .ts-specs table td,
html .layout-product .ts-specs table th{
  padding:9px 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--ts-line-soft) !important;
  background:none !important;
  font-weight:400 !important;
  vertical-align:top !important;
  line-height:1.6 !important;
}
html .layout-product .ts-specs table td:first-child,
html .layout-product .ts-specs table th:first-child{
  width:44% !important;
  color:var(--ts-text-faint) !important;
}
html .layout-product .ts-specs .title,
html .layout-product .ts-specs h2{
  font-size:17px !important;
  font-weight:500 !important;
  margin:0 0 12px !important;
  padding:0 !important;
  border:0 !important;
}
@media (min-width:1024px){
  html .layout-product .ts-specs .title,
  html .layout-product .ts-specs h2{ font-size:21px !important; }
}

/* Dòng "Thương hiệu" trùng với dòng hãng phía trên tên sản phẩm.
   Giữ nguyên thẻ .a-stock vì selectCallback ghi vào đó. */
html .layout-product .inventory_quantity .mb-break:first-child,
html .layout-product .inventory_quantity .line{ display:none !important; }
html .layout-product .btn-mua .btn-buyNow{
  min-height:54px !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  border-radius:var(--ts-r-md) !important;
  background:var(--ts-accent) !important;
  border:0 !important;
  box-shadow:0 2px 10px rgba(37,99,235,.22) !important;
}
html .layout-product .btn-mua .btn-buyNow .txt-main,
html .layout-product .btn-mua .btn_add_cart .txt-main{
  font-size:14px !important;
  font-weight:600 !important;
}
html .layout-product .btn-mua .btn-buyNow span:not(.txt-main){
  font-size:11px !important;
  font-weight:400 !important;
  opacity:.9 !important;
}
html .layout-product .btn-mua .btn_add_cart{
  min-height:54px !important;
  font-size:14px !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  color:var(--ts-text) !important;
}
/* màu 3 nút Bảo Kim gán inline bởi script của họ — không đè được */
html .layout-product .bk-btn{
  margin-top:16px !important;
  padding-top:14px !important;
  border-top:1px solid var(--ts-line-soft) !important;
}
html .layout-product .bk-btn::before{
  content:'Hình thức thanh toán khác' !important;
  display:block !important;
  font-size:11px !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  color:var(--ts-text-faint) !important;
  margin-bottom:9px !important;
}
html .layout-product .bk-btn-box button{
  min-height:40px !important; border-radius:var(--ts-r-sm) !important; padding:6px 10px !important;
}
html .layout-product .bk-btn-box button strong{
  font-size:12.5px !important; font-weight:500 !important; text-transform:none !important;
}
/* Khối "Khuyến mại đang áp dụng" — bản dựng đánh số tròn từng dòng.
   Nội dung lấy từ đoạn giữa hai thẻ h5 trong mô tả sản phẩm. */
html .layout-product .block-promotion{
  border:1px solid var(--ts-accent-soft) !important;
  border-radius:var(--ts-r-md) !important;
  overflow:hidden !important;
  margin:16px 0 !important;
}
html .layout-product .block-promotion .heading-promo{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--ts-accent-soft) !important;
  color:var(--ts-accent-text) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  padding:9px 13px !important;
  margin:0 !important;
  border:0 !important;
}
html .layout-product .block-promotion .promo-content{
  padding:10px 13px 12px !important;
}
html .layout-product .block-promotion .promo-content ul,
html .layout-product .block-promotion .promo-content ol{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  counter-reset:tspromo !important;
}
html .layout-product .block-promotion .promo-content li{
  position:relative !important;
  padding-left:24px !important;
  margin:0 0 7px !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--ts-text-mid) !important;
  counter-increment:tspromo !important;
  list-style:none !important;
}
html .layout-product .block-promotion .promo-content li:last-child{ margin-bottom:0 !important; }
html .layout-product .block-promotion .promo-content li::before{
  content:counter(tspromo) !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  width:17px !important;
  height:17px !important;
  border-radius:50% !important;
  background:var(--ts-accent-soft) !important;
  color:var(--ts-accent-text) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html .layout-product .block-promotion .promo-content li b,
html .layout-product .block-promotion .promo-content li strong{
  color:var(--ts-text) !important;
  font-weight:500 !important;
}
html .layout-product .block-promotion .promo-content p{
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--ts-text-mid) !important;
  margin:0 0 7px !important;
}
html .layout-product .block-policy{
  border:1px solid var(--ts-line) !important; border-radius:var(--ts-r-md) !important;
}
html .product-content .title, html .product-review .title,
html .product-together h2, html .product-related h2{
  font-size:17px !important;
  font-weight:500 !important;
  border-bottom:1px solid var(--ts-line) !important;
  padding-bottom:10px !important;
  margin-bottom:14px !important;
}

/* --------------------------------------------- B7. BLOG VÀ BÀI VIẾT */
html .layout-article .article-title{
  font-size:26px !important; line-height:1.3 !important;
}
/* dãy số trang của theme, đặt dưới nút Xem thêm */
html .layout-blog .pagi-div{ margin-top:18px !important; text-align:center !important; }
/* Luật này viết từ hồi chưa dựng lại trang bài viết. Bỏ max-width để chữ rộng
   bằng ảnh bìa; cỡ chữ và giãn dòng đã khai trong mục A18 nên không cần lặp. */
html .layout-article .rte{
  font-size:14px !important;
  line-height:1.85 !important;
  color:var(--ts-text-mid) !important;
}
html .layout-blog .time-post, html .layout-article .time-post{
  font-size:11.5px !important; color:var(--ts-text-faint) !important;
}
html .tag_article a{
  background:var(--ts-chip-bg) !important;
  color:var(--ts-chip-text) !important;
  border-radius:14px !important;
  padding:4px 11px !important;
  font-size:12px !important;
}

/* --------------------------------------------- B8. TRANG TÀI KHOẢN */
html .page_customer_account .block-account, html .page_order .block-account{
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  padding:14px !important;
  background:#fff !important;
}
html .block-account .title-account{
  font-size:13px !important; font-weight:500 !important;
  border-bottom:1px solid var(--ts-line) !important;
  padding-bottom:9px !important; margin-bottom:9px !important;
}
html .table-order thead th, html .table-cart thead th{
  font-size:11.5px !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
  color:var(--ts-text-faint) !important;
  font-weight:500 !important;
}
html .table-order td, html .table-cart td{
  border-bottom:1px solid var(--ts-line-soft) !important; font-size:13px !important;
}

/* ------------------------------------------- B9. FOOTER CỦA THEME */
html .footer{ background:var(--ts-bg-alt) !important; border-top:1px solid var(--ts-line) !important; }
html .footer .title-menu{
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  color:var(--ts-text) !important;
}
html .footer .li_menu a, html .footer .list_footer{
  font-size:13px !important; color:var(--ts-text-soft) !important;
}
html .block-mailchimp{ background:var(--ts-dark) !important; }
html .block-mailchimp h2{ color:#fff !important; font-size:20px !important; }
html .block-mailchimp .btn-default{
  background:var(--ts-accent) !important; color:#fff !important; border:0 !important; font-weight:500 !important;
}
html .backtop{ background:var(--ts-accent) !important; border-radius:50% !important; }

/* ----------------------------------------- B10. THÀNH PHẦN DÙNG CHUNG */
html .breadcrumb, html .awe-breadcrumb{
  background:transparent !important;
  font-size:11.5px !important;
  color:var(--ts-text-faint) !important;
  padding:10px 0 !important;
}
html .form-control{
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  font-size:13.5px !important;
  color:var(--ts-text) !important;
}
html .form-control:focus{
  border-color:var(--ts-accent) !important;
  box-shadow:0 0 0 3px var(--ts-accent-soft) !important;
}
/* ---- chip thông số trên mọi thẻ sản phẩm ----
   Khai ở đây thay vì bó trong .item_product_main, vì khối "Bạn đã xem" do
   JavaScript dựng bằng khuôn thẻ riêng. Không phủ rộng thì ở đó chip giữ
   nguyên kiểu gốc của theme: nền đỏ, dán đè lên ảnh. */
html .tick-tag{
  position:static !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  margin:0 0 8px !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html .tick-tag:empty{ display:none !important; }
html .tick-tag span,
html .tick-tag a{
  position:static !important;
  background:var(--ts-chip-bg) !important;
  color:var(--ts-chip-text) !important;
  font-size:10px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  padding:3px 7px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-transform:none !important;
}

/* ---- ô tìm kiếm trang search và 404 ----
   Phải khai ở phần B. Theme nạp CSS bằng JavaScript sau khi trang tải xong,
   nên luật cho thẻ form, input và button ở phần A bị đè, ba thành phần rơi
   xuống xếp dọc thay vì nằm một hàng. */
html .ts-sform{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  max-width:560px !important;
  margin:0 0 22px !important;
  padding:11px 14px !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
}
html .ts-sform--warn{
  border:2px solid var(--ts-accent) !important;
  margin:9px 0 0 !important;
  max-width:none !important;
}
html .ts-sform svg{ flex:0 0 auto !important; color:var(--ts-text-faint) !important; }
html .ts-sform input,
html .ts-sform input[type="text"]{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:none !important;
  border-radius:0 !important;
  font-family:inherit !important;
  font-size:13px !important;
  line-height:1.5 !important;
  color:var(--ts-text) !important;
}
html .ts-sform button{
  flex:0 0 auto !important;
  width:auto !important;
  padding:8px 16px !important;
  border:0 !important;
  border-radius:var(--ts-r-sm) !important;
  background:var(--ts-accent) !important;
  color:var(--ts-accent-ink) !important;
  font-family:inherit !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  cursor:pointer !important;
}
html .ts-sform button:hover{ filter:brightness(.94) !important; }

/* ---- nút thanh toán và nút phụ của giỏ hàng ----
   Khai ở phần B vì theme nạp CSS sau khi trang tải xong. */
html .layout-cart .cart__btn-proceed-checkout{
  display:block !important;
  width:100% !important;
  margin-top:14px !important;
  padding:13px 20px !important;
  border:0 !important;
  border-radius:var(--ts-r-md) !important;
  background:var(--ts-accent) !important;
  color:var(--ts-accent-ink) !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-transform:none !important;
  cursor:pointer !important;
}
html .layout-cart .cart__btn-proceed-checkout:hover{ filter:brightness(.94) !important; }
html .layout-cart .cart-header-info{ display:none !important; }

/* Ô tăng giảm số lượng. Khuôn mẫu của theme bọc nó bằng class input-group-btn
   của bootstrap, mà class đó khai width:1% và white-space:nowrap — ô bị bóp
   thành một vạch mỏng. Phải giành lại ở phần B vì theme nạp CSS sau. */
html .layout-cart .ts-qty,
html .layout-cart .ajaxcart__qty{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  white-space:normal !important;
  vertical-align:middle !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-sm) !important;
  overflow:hidden !important;
  background:#fff !important;
}
html .layout-cart .ts-qty button,
html .layout-cart .ajaxcart__qty-adjust{
  flex:0 0 auto !important;
  width:32px !important;
  height:32px !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--ts-text-mid) !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
html .layout-cart .ts-qty button:hover,
html .layout-cart .ajaxcart__qty-adjust:hover{
  background:var(--ts-bg-alt) !important;
  color:var(--ts-accent-text) !important;
}
html .layout-cart .ts-qty input,
html .layout-cart .ajaxcart__qty-num{
  flex:0 0 42px !important;
  width:42px !important;
  height:32px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-left:1px solid var(--ts-line) !important;
  border-right:1px solid var(--ts-line) !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-align:center !important;
  font-family:inherit !important;
  font-size:13px !important;
  color:var(--ts-text) !important;
}

/* Nút Xoá: theme để nó lọt giữa dòng, kéo về đúng cụm chữ phụ dưới tên */
html .layout-cart .cart__btn-remove{
  position:static !important;
  float:none !important;
  display:inline !important;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:var(--ts-text-faint) !important;
  font-size:11.5px !important;
  text-decoration:underline !important;
}
html .layout-cart .cart__btn-remove:hover{ color:var(--ts-sale) !important; }
/* Thân dòng hàng phải xếp DỌC: tên, rồi biến thể và nút xoá, rồi hàng số
   lượng với giá. Theme khai .cart_info là flex ngang nên ba cụm đó bị dồn
   sang phải nằm cùng một hàng với tên. */
html .layout-cart .ts-line__b,
html .layout-cart .cart_info{
  display:block !important;
  float:none !important;
  width:auto !important;
  padding:0 !important;
}
html .layout-cart .ts-line__in{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:14px 16px !important;
}
/* Ảnh sản phẩm: theme khai chiều cao riêng cho .cart_image nên ô bị kéo dọc.
   Ép về ô vuông 62px, ảnh co vừa bên trong. */
html .layout-cart .ts-line__th,
html .layout-cart .cart_image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 62px !important;
  width:62px !important;
  height:62px !important;
  min-height:0 !important;
  max-height:62px !important;
  padding:4px !important;
  overflow:hidden !important;
  border-radius:var(--ts-r-md) !important;
  background:var(--ts-bg-alt) !important;
}
html .layout-cart .ts-line__th img,
html .layout-cart .cart_image img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
html .layout-cart .ts-line__n{
  display:block !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
}
html .layout-cart .ts-line__meta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:5px !important;
  margin-top:3px !important;
  font-size:11.5px !important;
  color:var(--ts-text-faint) !important;
}
html .layout-cart .ts-line__meta .variant-title{
  display:inline !important;
  margin:0 !important;
  font-size:11.5px !important;
  color:var(--ts-text-faint) !important;
}
html .layout-cart .ts-line__row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:10px !important;
}
html .layout-cart .ts-line__p{ text-align:right !important; }

/* Nút "Tiếp tục mua hàng": là liên kết chữ ở cả hai khổ màn hình, không phải
   khối xám to như theme mặc định. */
html .layout-cart .ts-cart__back,
html .layout-cart .cart_btn_continue .btn-proceed-checkout{
  display:inline-block !important;
  width:auto !important;
  min-height:0 !important;
  margin-top:18px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--ts-accent-text) !important;
  font-size:13px !important;
  font-weight:400 !important;
  text-align:left !important;
  text-transform:none !important;
}
html .layout-cart .ts-cart__back:hover{ text-decoration:underline !important; }
html .layout-cart .cart_btn_continue{ text-align:left !important; }

/* Dải nút Bảo Kim canh đúng bề ngang với nút Thanh toán trong hộp tóm tắt.
   Hộp tóm tắt rộng 320px và có đệm 16px, nên phần bên trong chỉ 288px. */
/* Bốn nút trong hộp tóm tắt phải cùng bề ngang, cùng bán kính bo và cùng
   khoảng cách. Nút Thanh toán là của theme, ba nút còn lại do Bảo Kim dựng
   nên mỗi bên một kiểu — phải ép cả khối bọc lẫn từng nút. */
html .layout-cart .cart__btn-proceed-checkout-dt{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}
html .layout-cart .ts-bk{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
html .layout-cart .ts-bk .bk-btn,
html .layout-cart .ts-bk .bk-btn-box,
html .layout-cart .ts-bk .bk-btn-content{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}
html .layout-cart .ts-bk button{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-height:52px !important;
  margin:8px 0 0 !important;
  padding:8px 14px !important;
  border:0 !important;
  border-radius:var(--ts-r-md) !important;
  font-family:inherit !important;
}
html .layout-cart .cart__btn-proceed-checkout{
  min-height:52px !important;
  margin-top:14px !important;
}
html .layout-cart .ajaxcart__inner{ max-height:none !important; overflow:visible !important; }


/* ==========================================================================
   POPUP GIỎ HÀNG
   Theme có hai popup, cùng class .popup-cart: #popup-cart-desktop và
   #popup-cart-mobile. Cái đang chạy là bản mobile, cấu trúc gồm
   .header-popcart > .top-cart-header, .media-content, .noti-cart-count,
   .cart_btn-close và .bottom-action. Viết cho class chung nên cả hai cùng ăn.
   ========================================================================== */

html body .popup-cart,
html body #popup-cart-mobile.popup-cart-mobile,
html body #popup-cart-desktop{
  border:0 !important;
  border-radius:var(--ts-r-lg) !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 18px 44px rgba(15,23,41,.18) !important;
}
html .popup-cart .header-popcart{ position:relative !important; }

/* dòng tiêu đề: nền trắng, chữ đen, dấu tích xanh */
html body .popup-cart .top-cart-header,
html body .popup-cart-mobile .header-popcart .top-cart-header,
html body #popup-cart-mobile .header-popcart .top-cart-header{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:16px 54px 14px 20px !important;
  border-bottom:1px solid var(--ts-line) !important;
  background:#fff !important;
  color:var(--ts-text) !important;
  font-size:15px !important;
  font-weight:500 !important;
  text-transform:none !important;
}
/* Nền navy nằm trên thẻ span BÊN TRONG, do luật
   .popup-cart-mobile .header-popcart .top-cart-header span trong ajaxcart.scss.css.
   Class ở đó là .popup-cart-mobile có gạch nối, khác .popup-cart mà thẻ ngoài
   cũng mang — nên phải nhắm đúng chuỗi ấy và cộng thêm một cấp để thắng. */
html body .popup-cart .top-cart-header span,
html body .popup-cart-mobile .header-popcart .top-cart-header span,
html body #popup-cart-mobile .header-popcart .top-cart-header span,
html body #popup-cart-desktop .header-popcart .top-cart-header span{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  width:auto !important;
  padding:0 !important;
  background:none !important;
  color:var(--ts-text) !important;
  font-size:15px !important;
  font-weight:500 !important;
  text-transform:none !important;
}
html body .popup-cart .top-cart-header svg,
html body .popup-cart-mobile .header-popcart .top-cart-header svg,
html body #popup-cart-mobile .header-popcart .top-cart-header svg,
html body #popup-cart-desktop .header-popcart .top-cart-header svg{
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  min-width:0 !important;
  max-width:20px !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  vertical-align:middle !important;
  color:var(--ts-ok) !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
html body .popup-cart .top-cart-header svg path,
html body .popup-cart-mobile .header-popcart .top-cart-header svg path{
  fill:currentColor !important;
}

/* nút đóng */
/* CHỈ nhắm nút X là con trực tiếp của .header-popcart. Nút "Tiếp tục mua hàng"
   dưới đáy cũng mang class cart_btn-close vì nó cũng đóng popup — nhắm rộng
   thì nó bị biến thành nút tròn 32px ở góc, chữ bị ép dọc. */
html body .popup-cart .header-popcart > .cart_btn-close,
html body .popup-cart-mobile .header-popcart > .cart_btn-close,
html body #popup-cart-mobile .header-popcart > .cart_btn-close{
  position:absolute !important;
  top:12px !important;
  right:14px !important;
  width:32px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:var(--ts-bg-alt) !important;
  color:var(--ts-text-soft) !important;
  font-size:13px !important;
  cursor:pointer !important;
}
html body .popup-cart .header-popcart > .cart_btn-close:hover{
  background:var(--ts-line) !important;
  color:var(--ts-text) !important;
}

/* thân: danh sách sản phẩm vừa thêm */
html body .popup-cart .media-content,
html body .popup-cart-mobile .media-content,
html body #popup-cart-mobile .media-content{
  padding:14px 20px !important;
  max-height:min(44vh, 320px) !important;
  overflow-y:auto !important;
}
html .popup-cart .media-content img{
  max-width:62px !important;
  max-height:62px !important;
  width:auto !important;
  height:auto !important;
  border-radius:var(--ts-r-sm) !important;
  background:var(--ts-bg-alt) !important;
}

/* dòng đếm số sản phẩm trong giỏ */
html body .popup-cart .noti-cart-count,
html body .popup-cart-mobile .noti-cart-count,
html body #popup-cart-mobile .noti-cart-count{
  display:block !important;
  padding:12px 20px !important;
  border-top:1px solid var(--ts-line-soft) !important;
  background:var(--ts-bg-alt) !important;
  color:var(--ts-text-soft) !important;
  font-size:12.5px !important;
}
html .popup-cart .noti-cart-count:hover{ color:var(--ts-accent-text) !important; }

/* hai nút dưới cùng: cùng chiều cao, cùng bo góc */
html body .popup-cart .bottom-action,
html body .popup-cart-mobile .bottom-action,
html body #popup-cart-mobile .bottom-action,
html body #popup-cart-desktop .bottom-action{
  display:flex !important;
  gap:10px !important;
  padding:14px 20px 18px !important;
  border:0 !important;
  background:#fff !important;
}
html body .popup-cart .bottom-action > a,
html body .popup-cart .bottom-action > button,
html body .popup-cart-mobile .bottom-action > a,
html body .popup-cart-mobile .bottom-action > button,
html body #popup-cart-mobile .bottom-action > a,
html body #popup-cart-mobile .bottom-action > button,
html body #popup-cart-desktop .bottom-action > a,
html body #popup-cart-desktop .bottom-action > button{
  flex:1 1 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:11px 16px !important;
  border-radius:var(--ts-r-md) !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  text-transform:none !important;
  cursor:pointer !important;
}
/* Mọi nút trong .bottom-action, kể cả nút mang class cart_btn-close, là nút
   thường nằm trong hàng — không định vị tuyệt đối, không bo tròn. */
html body .popup-cart .bottom-action .cart_btn-close,
html body .popup-cart-mobile .bottom-action .cart_btn-close,
html body #popup-cart-mobile .bottom-action .cart_btn-close{
  position:static !important;
  top:auto !important;
  right:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:44px !important;
  border-radius:var(--ts-r-md) !important;
  font-size:13.5px !important;
  writing-mode:horizontal-tb !important;
  white-space:nowrap !important;
}

/* nút trái: nền trắng viền xám. Theme để nền xám đậm. */
html body .popup-cart .bottom-action > *:first-child,
html body .popup-cart-mobile .bottom-action > *:first-child,
html body #popup-cart-mobile .bottom-action > *:first-child,
html body #popup-cart-desktop .bottom-action > *:first-child{
  background:#fff !important;
  background-color:#fff !important;
  border:1px solid var(--ts-line) !important;
  color:var(--ts-text) !important;
}
html body .popup-cart .bottom-action > *:first-child:hover,
html body .popup-cart-mobile .bottom-action > *:first-child:hover{
  background:var(--ts-bg-alt) !important;
  background-color:var(--ts-bg-alt) !important;
}
/* nút phải: cobalt của site, không phải navy đặc của theme */
html body .popup-cart .bottom-action > *:last-child,
html body .popup-cart-mobile .bottom-action > *:last-child,
html body #popup-cart-mobile .bottom-action > *:last-child,
html body #popup-cart-desktop .bottom-action > *:last-child{
  border:0 !important;
  background:var(--ts-accent) !important;
  background-color:var(--ts-accent) !important;
  color:var(--ts-accent-ink) !important;
}
html body .popup-cart .bottom-action > *:last-child:hover,
html body .popup-cart-mobile .bottom-action > *:last-child:hover{ filter:brightness(.94) !important; }

/* Tiêu đề trang tài khoản: theme viết hoa toàn bộ h1 ở các trang khách hàng */
html .ts-accpage .ts-acc__t,
html .ts-authpage .ts-authbox__t{
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* Thẻ hạng nền navy: luật B1 ép mọi liên kết khi rê chuột thành xanh đậm,
   trên nền tối thì gần như biến mất. Giữ chữ trắng. */
html .ts-pts a,
html .ts-pts a:hover{ color:#fff !important; }

/* ---- ô nhập các trang tài khoản ---- */
html .ts-field input{
  display:block !important;
  width:100% !important;
  height:44px !important;
  margin:0 !important;
  padding:0 13px !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  background:#fff !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:13.5px !important;
  color:var(--ts-text) !important;
}
html .ts-field input:focus{
  border-color:var(--ts-accent) !important;
  box-shadow:0 0 0 3px var(--ts-accent-soft) !important;
  outline:0 !important;
}

/* ---- sổ địa chỉ: markup giữ nguyên của theme, chỉ dựng lại giao diện ---- */
html .page_address{ padding-top:20px !important; }
html .page_address .title-head{
  font-size:22px !important;
  font-weight:500 !important;
  text-transform:none !important;
  margin:0 0 16px !important;
}
html .page_address .customer_address,
html .page_address .total_address > [class*="col-"]{
  margin-bottom:12px !important;
}
html .page_address .btn-primary,
html .page_address .btn-more,
html .page_address .btn-submit{
  background:var(--ts-accent) !important;
  border:0 !important;
  border-radius:var(--ts-r-md) !important;
  color:var(--ts-accent-ink) !important;
  font-size:13px !important;
  font-weight:500 !important;
  text-transform:none !important;
}
html .page_address .btn-dark-address,
html .page_address .btn-outline{
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-md) !important;
  color:var(--ts-text) !important;
  font-size:13px !important;
  font-weight:500 !important;
  text-transform:none !important;
}
/* Nút Sửa và Xoá: theme đặt chiều cao cố định và giãn dòng lớn, chữ bị đẩy
   xuống đáy nút. Ép về flex canh giữa, cùng chiều cao 36px. */
html .page_address .btn-address{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}
html .page_address .btn-edit-addr,
html .page_address .btn-edit,
html .page_address .btn-delete{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:36px !important;
  min-height:0 !important;
  min-width:64px !important;
  margin:0 !important;
  padding:0 14px !important;
  line-height:1 !important;
  vertical-align:middle !important;
  float:none !important;
}
html .page_address .btn-edit-addr.hidden,
html .page_address .btn-delete.hidden{ display:none !important; }

html .page_address .modal_address .form-control{
  height:42px !important;
  border-radius:var(--ts-r-md) !important;
}

html .alert-warning{ background:var(--ts-warn-soft) !important; border-color:#F5E3C4 !important; color:var(--ts-warn) !important; }
html .alert-success{ background:var(--ts-ok-soft) !important; border-color:#CFE8DF !important; color:var(--ts-ok) !important; }

/* ==========================================================================
   B11. CHUẨN MÀU CÁC KHỐI CÒN LẠI CỦA THEME
   Bản v5 đánh số mục này là A10 và đặt ở cuối file, nhưng nội dung là đè lên
   theme nên nó thuộc phần B. Áp cho section_3_banner và section_blog.
   ========================================================================== */

/* --- dải banner thương hiệu --- */
html .section_3_banner{ padding:30px 0 !important; }
html .section_3_banner img{
  border-radius:var(--ts-r-md) !important;
  transition:transform .15s ease !important;
}
html .section_3_banner a:hover img{ transform:translateY(-2px) !important; }

/* --- khối tin tức --- */
html .section_blog{ padding:30px 0 !important; }
html .section_blog .section-title h2,
html .section_blog .section-title h2 a{
  font-size:19px !important;
  font-weight:600 !important;
  color:var(--ts-text) !important;
  text-transform:none !important;
}
html .section_blog .section-title h2 span,
html .section_blog .section-title h2 b{ color:var(--ts-text) !important; }
html .section_blog .new-item,
html .section_blog .item-blog{
  background:#fff !important;
  border:1px solid var(--ts-line) !important;
  border-radius:var(--ts-r-lg) !important;
  overflow:hidden !important;
  transition:border-color .15s ease, transform .15s ease !important;
}
html .section_blog .new-item:hover,
html .section_blog .item-blog:hover{
  border-color:#CBD2DE !important;
  transform:translateY(-2px) !important;
  box-shadow:none !important;
}
html .section_blog .new-item h3 a,
html .section_blog .item-blog h3 a{
  font-size:13.5px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  color:var(--ts-text) !important;
}
html .section_blog .new-item h3 a:hover,
html .section_blog .item-blog h3 a:hover{ color:var(--ts-accent-text) !important; }
html .section_blog .time-post,
html .section_blog .post-date{
  font-size:11.5px !important;
  color:var(--ts-text-faint) !important;
}
html .section_blog .summary,
html .section_blog .desc-blog{
  font-size:12.5px !important;
  line-height:1.65 !important;
  color:var(--ts-text-soft) !important;
}

@media (min-width:1024px){
  html .section_blog .section-title h2,
  html .section_blog .section-title h2 a{ font-size:22px !important; }
}


/* ==========================================================================
   B12. MOBILE CHO PHẦN THEME
   Mục này luôn nằm CUỐI file. Thêm luật mới thì thêm vào đây, đừng chèn
   thêm khối nào bên dưới.
   ========================================================================== */
@media (max-width:767px){
  html, html body{ overflow-x:hidden !important; max-width:100% !important; }
  html .container{ max-width:100% !important; padding-left:12px !important; padding-right:12px !important; }
  html img{ max-width:100% !important; height:auto !important; }

  /* lưới sản phẩm của theme ở trang danh mục — 2 cột */
  html .category-products .row > [class*="col-"],
  html .products-view .row > [class*="col-"]{
    flex:0 0 50% !important; max-width:50% !important;
  }
  html .item_product_main .product-info{ padding:9px 10px 11px !important; }
  html .item_product_main .product-name{ font-size:12px !important; }
  html .item_product_main .price-box .price{ font-size:13px !important; }
  html .section-index .section-title h2{ font-size:17px !important; }
  html .layout-product .title-product{ font-size:20px !important; }
  html .layout-product .special-price .product-price{ font-size:22px !important; }
}


/* ==========================================================================
   HERO - can banner (06/10/2026)
   Slider 1660x680, banner phu 860x400. Desktop: cot trai 69.43% de hai cot
   cao bang nhau ma khong cat anh. Mobile/tablet: giu dung ti le tung anh.
   ========================================================================== */
.ts-promo--img{ position:relative; aspect-ratio:43/20; }
.ts-promo--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){
  .ts-hero__row{ grid-template-columns:calc(69.43% + 1px) 1fr; gap:14px; align-items:stretch; }
  .ts-hero__main{ height:auto; aspect-ratio:83/34; }
  .ts-hero__side{ grid-template-rows:1fr 1fr; gap:14px; }
  .ts-hero__side .ts-promo--img{ aspect-ratio:auto; min-height:0; }
}

/* ==========================================================================
   DAI CAM KET - dan lai (06/10/2026)
   Desktop: 4 cot trong khung bo goc, icon trong vong tron.
   Duoi 1024px: luoi 2 x 2, hien du 4 muc.
   ========================================================================== */
.ts-trust{ margin:18px 0 24px; border:0; background:none; }
.ts-trust__row{ grid-template-columns:repeat(2,minmax(0,1fr)); background:#fff; border:1px solid var(--ts-line); border-radius:var(--ts-r-lg); overflow:hidden; }
.ts-trust__item, .ts-trust__item--wide{ display:flex; flex-direction:row; align-items:center; gap:12px; padding:14px 16px; min-width:0; }
.ts-trust__item + .ts-trust__item{ border-left:0; }
.ts-trust__item:nth-child(2n){ border-left:1px solid var(--ts-line-soft); }
.ts-trust__item:nth-child(n+3){ border-top:1px solid var(--ts-line-soft); }
.ts-trust__item svg{ box-sizing:content-box; width:20px; height:20px; padding:9px; border-radius:50%; background:var(--ts-accent-soft); color:var(--ts-accent); }
.ts-trust__item b{ font-size:13px; font-weight:600; line-height:1.35; }
.ts-trust__item span{ display:none; }
@media (min-width:768px){
  .ts-trust__item span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; margin-top:3px; }
}
@media (min-width:1024px){
  .ts-trust__row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ts-trust__item{ padding:16px 20px; }
  .ts-trust__item span{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .ts-trust__item:nth-child(n+3){ border-top:0; }
  .ts-trust__item + .ts-trust__item{ border-left:1px solid var(--ts-line-soft); }
}
@media (max-width:767px){
  .ts-trust{ margin:14px 0 18px; }
  .ts-trust__item{ gap:10px; padding:12px; }
  .ts-trust__item svg{ width:18px; height:18px; padding:7px; }
  .ts-trust__item b{ font-size:12.5px; }
}