/* ==========================================================================
   SANPHAM CSS — CUA 0 (trang khach xem hang).
   Chi dung DESIGN TOKEN da co trong bm-base.css. KHONG dat mau moi,
   khong dat co chu moi, khong tai font/anh tu ben ngoai.
   Bo cuc dung lai .bm-vung / .bm-muc / .bm-card / .bm-btn cua he thong.
   ========================================================================== */

/* Hoc kieu dang cot trai tu khu noi bo (bm-private.css) nhung VIET RIENG
   o day. Khong nap, khong sua mot dong nao cua file rieng tu do. */
.sp-body { --sp-cot-rong: 288px; --sp-tren: 92px; }

/* ---------------------------------------------------------- DAU MAN */
.sp-dau { padding: var(--sp-5) 0 var(--sp-4); }
.sp-dau__chu { margin-top: var(--sp-4); }
.sp-dau__hang { display: flex; align-items: center; gap: var(--sp-3); }
.sp-nut-dm { display: none; flex: 0 0 auto; min-height: 52px; }
.sp-tieude {
  font-size: var(--fs-section); line-height: var(--lh-section);
  font-weight: var(--fw-bold);
}
.sp-tongso {
  margin-top: var(--sp-1); color: var(--color-premium);
  font-size: var(--fs-card); font-weight: var(--fw-semibold);
}
.sp-mota { color: var(--color-text-muted); margin-top: var(--sp-1); }

/* Duong dan (breadcrumb) */
.sp-duong {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--color-text-dim);
  margin-bottom: var(--sp-4); min-height: 20px;
}
.sp-duong a { color: var(--color-text-muted); }
.sp-duong__ngan { color: var(--color-text-dim); }
.sp-duong__nay { color: var(--color-text); font-weight: var(--fw-semibold); }

/* O tim — to, dat giua */
.sp-tim {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  max-width: 720px; margin: 0 auto;
}
.sp-tim__o {
  flex: 1 1 260px; min-height: 52px; font-size: var(--fs-card);
  padding: 0 var(--sp-4);
}
.sp-tim__nut { min-height: 52px; flex: 0 0 auto; }

/* Nut tim nhanh */
.sp-nhanh {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); justify-content: center;
  max-width: 720px; margin: var(--sp-4) auto 0;
}
.sp-nhanh__nhan {
  font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge); text-transform: uppercase;
  color: var(--color-text-dim);
}
.sp-nhanh__ds { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ==========================================================================
   KHUNG HAI COT — cot trai cuon rieng, vung hang cuon rieng
   ========================================================================== */
.sp-khung {
  display: grid; gap: var(--sp-5);
  grid-template-columns: var(--sp-cot-rong) minmax(0, 1fr);
  align-items: start; padding-bottom: var(--sp-7);
}

.sp-cot {
  background: var(--color-bg-alt); border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 0 var(--sp-2) var(--sp-4);
  position: sticky; top: var(--sp-3);
  max-height: calc(100vh - var(--sp-6));
  overflow-y: auto;                 /* thanh cuon RIENG cua cot trai */
  overscroll-behavior: contain;
}
.sp-cot__codinh {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-bg-alt);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: var(--border-thin);
  display: flex; gap: var(--sp-2); align-items: center;
}
.sp-cot__loc { flex: 1 1 auto; min-height: 38px; font-size: var(--fs-small); }
.sp-cot__dong { display: none; }
.sp-cot__than { padding-top: var(--sp-2); }

/* ---------- MOT MUC TRONG CAY — dung cho MOI cap, khong gioi han ---------- */
.sp-muc { margin-bottom: 1px; }
.sp-muc__hang {
  display: flex; align-items: stretch; gap: 2px;
  border-radius: var(--radius-sm);
  transition: background var(--tr-fast);
}
.sp-muc__hang:hover { background: var(--color-surface-2); }

/* Mui ten mo/dong — RIENG mot nut, bam khong lam doi trang */
.sp-muc__mui {
  flex: 0 0 22px; width: 22px; border: 0; background: transparent;
  color: var(--color-text-dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
  transition: transform var(--tr-fast), color var(--tr-fast);
}
.sp-muc__mui:hover { color: var(--color-accent); }
.sp-muc__mui[aria-expanded="true"] { transform: rotate(90deg); }
.sp-muc__mui--trong { visibility: hidden; cursor: default; }

/* Ten nhom — bam la xem hang cua chinh nhom do */
.sp-muc__ten {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  color: var(--color-text); font-size: 14px;
  line-height: var(--lh-tight);
}
.sp-muc__ten:hover { text-decoration: none; }
.sp-muc__chu { flex: 1 1 auto; min-width: 0; }
.sp-muc__so {
  flex: 0 0 auto; font-size: var(--fs-badge);
  color: var(--color-text-dim); font-variant-numeric: tabular-nums;
}
/* Cap 1 dam hon de mat co diem neo */
.sp-muc--cap0 > .sp-muc__hang .sp-muc__ten {
  font-weight: var(--fw-semibold);
}
.sp-muc--cap1 > .sp-muc__hang .sp-muc__ten,
.sp-muc--cap2 > .sp-muc__hang .sp-muc__ten,
.sp-muc--cap3 > .sp-muc__hang .sp-muc__ten {
  color: var(--color-text-muted); font-weight: var(--fw-regular);
}
/* Nhom rong: mo di nhung VAN bam duoc */
.sp-muc--rong .sp-muc__ten { opacity: .45; }
/* Nhom dang xem */
.sp-muc__ten[aria-current="page"] {
  background: var(--color-accent-soft); color: var(--color-accent);
  border-radius: var(--radius-sm); font-weight: var(--fw-semibold);
}
.sp-muc__con { }
.sp-cot__trong {
  padding: var(--sp-5) var(--sp-3); color: var(--color-text-dim);
  font-size: var(--fs-small); text-align: center;
}

/* ---------------------------------------------------------- THAN */
.sp-than {
  max-height: calc(100vh - var(--sp-6));
  overflow-y: auto;                 /* thanh cuon RIENG cua vung hang */
  overscroll-behavior: contain;
  padding: 0 var(--sp-1) var(--sp-5);
}
.sp-xemthem { display: flex; justify-content: center; margin-top: var(--sp-6); }

/* ---------------------------------------------------- LUOI NHOM (man 1) */
.sp-luoi-nhom {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.sp-o-nhom {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: border-color var(--tr-base), transform var(--tr-base);
  color: inherit;
}
.sp-o-nhom:hover {
  border-color: var(--color-accent-strong); transform: translateY(-2px);
  text-decoration: none;
}
.sp-o-nhom__anh {
  width: 100%; height: 148px; object-fit: cover;
  background: var(--color-surface-2); display: block;
}
/* Nhom khong co anh: o mau nen + chu ten to. KHONG bao gio de o trong. */
.sp-o-nhom__chu {
  height: 148px; display: grid; place-items: center; text-align: center;
  padding: var(--sp-3); font-size: var(--fs-card);
  font-weight: var(--fw-bold); line-height: var(--lh-tight);
  color: var(--color-text);
}
.sp-o-nhom__chu--1 { background: var(--color-primary); }
.sp-o-nhom__chu--2 { background: var(--color-surface-3); }
.sp-o-nhom__chu--3 { background: var(--color-accent-soft); }
.sp-o-nhom__chu--4 { background: var(--color-premium-soft); }
.sp-o-nhom__than {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 auto;
}
.sp-o-nhom__ten {
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.sp-o-nhom__so { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---------------------------------------------------- LUOI HANG (man 2) */
.sp-tomtat {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-4); color: var(--color-text-muted);
  font-size: var(--fs-small);
}
.sp-luoi {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.sp-the {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: border-color var(--tr-base), transform var(--tr-base);
  color: inherit;
}
.sp-the:hover {
  border-color: var(--color-accent-strong); transform: translateY(-2px);
  text-decoration: none;
}
.sp-the__anh {
  width: 100%; height: 190px; object-fit: cover; display: block;
  background: var(--color-surface-2);
}
/* Khong co anh: khung xam co ten hang, khong vo bo cuc */
.sp-the__khung {
  height: 190px; display: grid; place-items: center; text-align: center;
  padding: var(--sp-3); background: var(--color-surface-2);
  border-bottom: var(--border-thin);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--color-text-muted); line-height: var(--lh-tight);
  overflow: hidden;
}
.sp-the__than {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto;
}
.sp-the__ten {
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); flex: 1 1 auto;
}
.sp-the__ma {
  font-size: var(--fs-badge); color: var(--color-text-dim);
  letter-spacing: var(--ls-badge);
}
.sp-the__chan {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-2);
}
.sp-gia {
  font-size: var(--fs-card); font-weight: var(--fw-bold);
  color: var(--color-premium);
}
.sp-gia--lienhe { color: var(--color-text-muted); font-size: var(--fs-body); }

/* ---------------------------------------------------------- PHAN TRANG */
.sp-phantrang {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center; justify-content: center;
  margin-top: var(--sp-7);
}
.sp-phantrang__so {
  padding: 0 var(--sp-3); color: var(--color-text-muted);
  font-size: var(--fs-small); white-space: nowrap;
}

/* ---------------------------------------------------- CHI TIET (man 3) */
.sp-ct {
  display: grid; gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.sp-ct__anhto {
  width: 100%; height: 420px; object-fit: cover; display: block;
  background: var(--color-surface-2); border: var(--border-thin);
  border-radius: var(--radius-lg);
}
.sp-ct__khung {
  height: 420px; display: grid; place-items: center; text-align: center;
  padding: var(--sp-5); background: var(--color-surface-2);
  border: var(--border-thin); border-radius: var(--radius-lg);
  color: var(--color-text-muted); font-size: var(--fs-card);
}
.sp-ct__dai {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3);
}
.sp-ct__nho {
  width: 74px; height: 74px; object-fit: cover; cursor: pointer;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.sp-ct__nho[aria-current="true"] { border-color: var(--color-accent); }
.sp-ct__ten {
  font-size: var(--fs-section); line-height: var(--lh-section);
  font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
}
.sp-ct__gia {
  font-size: var(--fs-page); line-height: var(--lh-page);
  font-weight: var(--fw-bold); color: var(--color-premium);
  margin: var(--sp-4) 0;
}
.sp-ct__gia--lienhe {
  font-size: var(--fs-section); color: var(--color-text-muted);
}
.sp-ct__bang {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4); margin: var(--sp-5) 0;
  font-size: var(--fs-body);
}
.sp-ct__khoa { color: var(--color-text-dim); }
.sp-ct__nut { display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5); }

/* ---------------------------------------------------------- TRANG THAI */
.sp-trangthai { margin: var(--sp-6) 0; }

/* ---------------------------------------------------------- CHAN */
.sp-chan { grid-template-columns: 1.2fr 1fr 1fr; }

/* ==========================================================================
   MAN HINH HEP — luoi tu xuong 2 cot
   ========================================================================== */
/* ==========================================================================
   MAN HINH HEP — cot trai an di, bam nut "Danh muc" moi truot ra
   ========================================================================== */
@media (max-width: 1000px) {
  .sp-khung { grid-template-columns: minmax(0, 1fr); }
  .sp-nut-dm { display: inline-flex; }

  .sp-cot {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
    width: min(86vw, 320px); max-height: none; height: 100%;
    border-radius: 0; border-right: var(--border-thin);
    transform: translateX(-102%);
    transition: transform var(--tr-base);
    box-shadow: var(--shadow-lg);
  }
  .sp-cot--mo { transform: translateX(0); }
  .sp-cot__dong { display: inline-flex; }
  .sp-nen {
    position: fixed; inset: 0; background: rgba(4, 10, 20, .62);
    z-index: var(--z-drawer);
  }
  /* Man hep: de trang cuon binh thuong, khong chia hai vung cuon */
  .sp-than { max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
  .sp-ct { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .sp-ct__anhto, .sp-ct__khung { height: 320px; }
  .sp-ct__gia { font-size: var(--fs-section); }
  .sp-chan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sp-luoi,
  .sp-luoi-nhom { grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3); }
  .sp-the__anh, .sp-the__khung { height: 148px; }
  .sp-o-nhom__anh, .sp-o-nhom__chu { height: 116px; }
  .sp-o-nhom__chu { font-size: var(--fs-body); }
  .sp-tim__o { min-height: 46px; font-size: var(--fs-body); }
  .sp-tim__nut { min-height: 46px; }
  .sp-ct__bang { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .sp-ct__khoa { margin-top: var(--sp-2); }
  .sp-chan { grid-template-columns: minmax(0, 1fr); }
}

/* ================= SP-3 — thanh tim ngang + nhan nhom tren the ============= */
.sp-thanhtim {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.sp-thanhtim .sp-tim {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 320px;
  margin: 0;
}
.sp-thanhtim .sp-tim__o { flex: 1 1 auto; min-width: 0; }
.sp-tinhtrang { flex: 0 0 auto; }
.sp-tinhtrang__o { min-height: 52px; }

/* Nhan nhom nho tren the hang — bam vao thi loc theo nhom do */
.sp-the__nhom {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--bm-chu-phu, #6b7280);
  text-decoration: underline dotted;
  cursor: pointer;
}
.sp-the__nhom:hover,
.sp-the__nhom:focus { text-decoration: underline; }

/* ===================== SP-5 — bo cuc the + thanh dieu khien ============== */
/* So cot do JS dat qua bien --sp-cot. Man hinh hep JS tu ha xuong. */
.sp-luoi { grid-template-columns: repeat(var(--sp-cot, 4), minmax(0, 1fr)); }

/* Chieu cao the bang nhau tuyet doi */
.sp-the { height: 100%; }
.sp-the__than {
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto;
}
/* Ten hang chiem DUNG 2 dong, dai hon thi cat bang dau ba cham */
.sp-the__ten {
  margin: 0; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Khung nhan nhom LUON co, ke ca khi khong co nhom -> the khong lech nhau */
.sp-the__nhomkhung { min-height: 20px; }
.sp-the__nhom {
  display: inline-block; margin: 0; font-size: 12px; line-height: 1.35;
  color: var(--color-text-dim); text-decoration: none;
  border-bottom: 1px solid transparent; cursor: pointer;
}
.sp-the__nhom:hover, .sp-the__nhom:focus {
  color: inherit; text-decoration: underline;
}
/* Nut trang thai: cung kich thuoc, cung vi tri, luon o day the */
.sp-the__chan { margin-top: auto; display: flex; }
.sp-the__chan .bm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 116px; min-height: 28px; text-align: center;
}

/* ---- Thanh dieu khien: moi o mot cot, nhan chu nho o tren ---- */
.sp-o { display: flex; flex-direction: column; gap: 4px; }
.sp-o--tim { flex: 1 1 320px; }
.sp-o__nhan { font-size: 12px; opacity: .72; }
.sp-o__ghi { font-size: 12px; opacity: .72; align-self: center; }
.sp-socot__o, .sp-tinhtrang__o { min-height: 52px; }

/* ---- Hai chi so dat ngay tren luoi ---- */
.sp-chiso { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 16px; }
.sp-chiso__o { display: flex; flex-direction: column; }
.sp-chiso__nhan {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .72;
}
.sp-chiso__so { font-size: 20px; line-height: 1.2; }

/* ===================== SP-6 — nut lien he ================================ */
/* The gio la DIV; "moc" la the <a> mo trang chi tiet. */
.sp-the__moc {
  display: flex; flex-direction: column; flex: 1 1 auto;
  color: inherit; text-decoration: none; overflow: hidden;
}
.sp-the__moc:hover { text-decoration: none; }
/* SP-10: nut Goi/Zalo tren the da bo tu SP-9 -> don luon CSS chet cua no. */

/* ---- Khoi lien he co dinh goc duoi phai ---- */
.sp-lhcd {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.sp-lhcd__nut {
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm);
}
.sp-lhcd__bieu { font-weight: var(--fw-bold); }

/* SP-10: thong bao nho di cung nut Zalo tren the, da bo tu SP-9. */

/* ---- Dong lien he o chan trang ---- */
.sp-chan__lh {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: var(--border-thin);
}

/* ---- Dien thoai: khoi co dinh thu thanh hai nut tron ---- */
@media (max-width: 560px) {
  .sp-lhcd { right: 12px; bottom: 12px; }
  .sp-lhcd__chu { display: none; }
  .sp-lhcd__nut {
    width: 48px; height: 48px; padding: 0; border-radius: 999px;
    justify-content: center;
  }
}

/* ===================== SP-7 — bo cuc dau trang, anh, so cot ============== */
/* A. XOA KHUNG CUON thua: truoc day .sp-than cao gan het man hinh va cuon
   rieng, keo thanh cong cu treo lo lung giua khoang trong ~400px.
   Nay trang cuon binh thuong, luoi hang bat dau ngay sau hang dau. */
.sp-than { max-height: none; overflow: visible; }

/* Hang dau: TRAI chu — PHAI cong cu, cung mep tren */
.sp-dauhang {
  display: grid; gap: var(--sp-5); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}
.sp-dauhang__trai { min-width: 0; }
.sp-dauhang__phai {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
}
.sp-chon { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.sp-chiso { margin: var(--sp-3) 0 0; }
/* Chu thich nho nam NGAY DUOI o So cot, khong treo canh no nua */
.sp-o__ghi { align-self: flex-start; }

/* Man hinh hep: xep doc, o tim nguyen hang, hai o chon chia doi hang duoi */
@media (max-width: 900px) {
  .sp-dauhang { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* B. ANH KHONG BI KEO MEO.
   Truoc: chieu cao CUNG 190px, lai la phan tu flex nen bi the ep co/gian.
   Nay: khung co TI LE co dinh 4/3, anh phu kin khung theo cach GIU NGUYEN
   ti le goc va cat bot phan thua (object-fit: cover), flex: 0 0 auto de
   khong bi ep co. Anh doc va anh ngang deu trong dung hinh. */
.sp-the__anh, .sp-the__khung {
  height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto;
}
.sp-the__anh { object-fit: cover; object-position: center; }

/* C. Ten hang toi da 3 dong roi moi cat. Gia KHONG duoc vo dong. */
.sp-the__ten { -webkit-line-clamp: 3; min-height: 4.05em; }
.sp-gia { white-space: nowrap; }

/* Man hinh hep: giu ti le anh, khong quay lai chieu cao cung */
@media (max-width: 640px) {
  .sp-the__anh, .sp-the__khung { height: auto; aspect-ratio: 4 / 3; }
}

/* ===================== SP-8 — hoan thien giao dien ======================= */
/* Bao dam nhan chi danh cho trinh doc man hinh KHONG hien ra chu */
.bm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* ---- A. TEN DAI KHONG BAO GIO DE LEN GIA ----
   Truoc: cat bang chieu cao co dinh -> dong thu ba bi xen ngang than chu
   roi tran xuong de len gia. Nay khoa CA min- va max-height o dung 3 dong,
   nen hop khong the cao hon 3 dong du ten dai bao nhieu. */
.sp-the__ten {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
  line-height: 1.4; font-size: var(--fs-card, 15px);
  min-height: calc(1.4em * 3); max-height: calc(1.4em * 3);
  margin: 0; overflow-wrap: anywhere;
}

/* ---- D (SP-10). THE mang tong NAVY, sang hon nen trang MOT BAC.
   Khong dung trang dac nua: the chiem phan lon man hinh, de trang thi
   nuot mat mau thuong hieu. Hang van noi nho VIEN CYAN va bong nhe. ---- */
.sp-the {
  background: #132A44; color: var(--color-text, #E6EDF5);
  border: 1px solid rgba(45, 212, 232, .22); border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.sp-the:hover { border-color: rgba(45, 212, 232, .55); }
.sp-the__moc { color: inherit; }
.sp-the__ma { color: var(--color-text-dim, #8FA3B8); }
/* Anh giu NEN TRANG goc cua anh, khong bi am mau */
.sp-the__anh { background: #ffffff; }
.sp-the__khung { background: #0F2137; color: var(--color-text-dim, #8FA3B8);
  border-bottom: 1px solid rgba(45, 212, 232, .14); }
.sp-the__khung__bieu { font-size: 26px; line-height: 1; }
.sp-the__khung__chu { font-size: 11px; }
/* Gia giu mau cam — diem nhan cua the */
.sp-gia { color: #F2A03D; font-weight: var(--fw-bold, 700); }
.sp-gia--lienhe { color: var(--color-text-dim, #8FA3B8);
  font-weight: var(--fw-medium, 500); }

/* ---- C. TRANG THAI la NHAN, khong phai nut ---- */
.sp-the__hang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 20px; margin-top: auto;
}
.sp-the__nhom { color: var(--color-text-dim, #8FA3B8); }
.sp-the__nhom:hover, .sp-the__nhom:focus { color: var(--color-text, #E6EDF5); }
.sp-tt {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 12px; line-height: 1.3; text-transform: none;
  font-weight: var(--fw-medium, 500); white-space: nowrap;
  color: var(--color-text-dim, #8FA3B8);
}
.sp-tt__cham {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  flex: 0 0 auto;
}
.sp-tt--con .sp-tt__cham { background: #2e9e5b; }
.sp-tt--lh  .sp-tt__cham { background: #e08a1e; }

/* ---- D. Khoi tim: nut Tim SAT ben phai o nhap, cung hang cung chieu cao ---- */
.sp-dauhang__phai .sp-tim {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px;
}
.sp-dauhang__phai .sp-tim__o { flex: 1 1 auto; min-width: 0; }
.sp-dauhang__phai .sp-tim__nut { flex: 0 0 auto; }
.sp-dauhang__phai { gap: var(--sp-2); }
.sp-chon { gap: var(--sp-2); }
.sp-o__ghi { align-self: flex-start; margin-top: 2px; }

/* ---- E. Hai the so co khung ---- */
.sp-chiso { gap: var(--sp-3); }
.sp-chiso__o {
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  padding: 8px 14px; background: rgba(255, 255, 255, .05);
  min-width: 148px;
}
.sp-gioithieu { margin: var(--sp-2) 0 0; opacity: .85; max-width: 52ch; }

/* ---- F. Nut dang nhap mo di, khong tranh cho voi nut Goi ---- */
.sp-nut-dn { opacity: .8; text-transform: none; font-weight: var(--fw-medium, 500); }
.sp-nut-dn:hover { opacity: 1; }

/* ===================== SP-9 — 10 chinh sua ============================== */
/* 1. Chu trong the nho lai -> ten hien du, khong bi cat giua chung */
.sp-the__ten {
  font-size: 14px; line-height: 1.35;
  -webkit-line-clamp: 4; line-clamp: 4;
  min-height: calc(1.35em * 4); max-height: calc(1.35em * 4);
}
.sp-gia { font-size: 17px; }
.sp-gia--lienhe { font-size: 15px; }
.sp-the__ma { font-size: 11px; }
.sp-the__nhom, .sp-tt { font-size: 12px; }

/* 1. Ten nhom va nhan trang thai o CUNG MOT hang, khong be dong.
   Ten nhom dai thi cat bang ba cham, nhan trang thai khong bao gio bi day. */
.sp-the__hang { flex-wrap: nowrap; }
.sp-the__nhom {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-tt { flex: 0 0 auto; }

/* 2. Khung anh vuong 1:1 — het cat cut dau san pham */
.sp-the__anh, .sp-the__khung { aspect-ratio: 1 / 1; }
@media (max-width: 640px) {
  .sp-the__anh, .sp-the__khung { aspect-ratio: 1 / 1; }
}

/* 3. Da bo nut Goi/Zalo tren the -> bo luon phan dem duoi cung */
.sp-the__than { padding-bottom: var(--sp-4); }

/* 5. Mot dong tom tat o cuoi luoi, thay hai the so */
.sp-tomtat {
  margin: var(--sp-4) 0 0; text-align: center;
  font-size: 13px; opacity: .75;
}

/* 6. BO thanh cuon rieng cua cot danh muc — ca trang chi con MOT thanh cuon.
   Cot van dinh lai khi cuon, dinh ngay DUOI thanh dau (do bang JS). */
.sp-cot {
  max-height: none; overflow: visible; overscroll-behavior: auto;
  top: calc(var(--sp-daucao, 64px) + var(--sp-3));
}

/* 7. Nut xem them: chu dai hon nen can rong rai hon */
.sp-nut-them { min-height: 44px; padding-left: 20px; padding-right: 20px; }

/* ===================== SP-10 — thu the · huy hieu · dinh khi cuon ======== */
/* A. Huy hieu bao hanh: o vien mảnh cyan, chu hoa 10px, KHONG BAO GIO bi cat
   (nam ngoai vung cat chu cua ten hang). */
.sp-bh {
  display: inline-block; align-self: flex-start;
  font-size: 10px; line-height: 1.4; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(45, 212, 232, .55); color: #6FE3F5;
  background: rgba(45, 212, 232, .08);
}

/* B. THU THE con ~320px */
.sp-the__anh, .sp-the__khung { aspect-ratio: 1 / 1; max-height: 170px; }
.sp-the__than { padding: 10px 12px 12px; gap: 5px; }
.sp-the__ten {
  font-size: 13px; line-height: 1.3;
  -webkit-line-clamp: 2; line-clamp: 2;
  min-height: calc(1.3em * 2); max-height: calc(1.3em * 2);
}
.sp-gia { font-size: 15px; }
.sp-gia--lienhe { font-size: 13px; }
.sp-the__ma { font-size: 10px; }
.sp-the__nhom, .sp-tt { font-size: 11px; }

/* B. Ten nhom va nhan CUNG MOT HANG. Chat cho thi RUT GON NHAN,
   KHONG rut gon ten nhom — "01. CÁP SẠC" khong duoc cut. */
.sp-the__hang { flex-wrap: nowrap; overflow: hidden; gap: 6px; min-height: 16px; }
.sp-the__nhom {
  flex: 0 0 auto; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.sp-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* C. DINH KHI CUON.
   1) Thanh dau da sticky san trong bm-base.css — them nen DUC hoan toan
      de noi dung khong xuyen qua.
   2) Dai tren (duong dan + tieu de + khoi tim + hai o loc) dinh ngay duoi.
   3) Cot danh muc dinh duoi cung, chi tu cuon rieng KHI dai hon man hinh
      (overflow-y: auto -> vua man hinh thi khong co thanh cuon long). */
.bm-dau { background: var(--color-bg, #0A1628); backdrop-filter: none; }
.sp-dau {
  position: sticky; top: var(--sp-daucao, 64px); z-index: 20;
  background: var(--color-bg, #0A1628);
  border-bottom: 1px solid rgba(45, 212, 232, .14);
  padding-bottom: var(--sp-3);
}
.sp-cot {
  top: calc(var(--sp-daucao, 64px) + var(--sp-dautren, 0px) + var(--sp-3));
  max-height: calc(100vh - var(--sp-daucao, 64px)
                 - var(--sp-dautren, 0px) - var(--sp-5));
  overflow-y: auto; overscroll-behavior: contain;
}

/* Man hinh hep: dai tren cao qua thi thoi dinh, nhuong cho noi dung */
@media (max-width: 900px) {
  .sp-dau { position: static; }
  .sp-cot { max-height: none; overflow: visible; }
}

/* ===================== SP-11 — nen duc · mot hang · cam ket ============== */
/* 1. NEN DUC HOAN TOAN. Ghi thang ma mau, khong qua bien, khong trong suot,
   khong backdrop-filter -> noi dung KHONG THE xuyen qua khi cuon. */
.bm-dau {
  background: #0A1628;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sp-dau { background: #0A1628; padding-bottom: var(--sp-2); }

/* 3. KHU DAU MOT HANG: ten nhom · o tim · tinh trang · so cot */
.sp-dauhang {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3); grid-template-columns: none;
}
.sp-tieude {
  flex: 0 0 auto; margin: 0; font-size: 18px; line-height: 1.2;
  white-space: nowrap;
}
.sp-dauhang .sp-tim {
  flex: 1 1 280px; min-width: 0; display: flex; align-items: stretch; gap: 8px;
}
.sp-dauhang .sp-tim__o { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.sp-tinhtrang__o, .sp-socot__o {
  flex: 0 0 auto; width: auto; min-height: 44px;
}
/* Dong mo ta chi hien khi dang tim — rong thi khong chiem cho */
.sp-mota { margin: var(--sp-2) 0 0; }
.sp-mota:empty { display: none; }

/* 4. DONG CAM KET ~32px */
.sp-camket {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-height: 32px; margin-top: var(--sp-2); padding-top: 6px;
  font-size: 12px; line-height: 1.4;
  color: var(--color-text-dim, #8FA3B8);
  border-top: 1px solid rgba(45, 212, 232, .14);
}
.sp-camket__goi { color: #6FE3F5; font-weight: var(--fw-bold, 700); }

/* Man hinh hep: xep xuong, o tim nguyen hang */
@media (max-width: 760px) {
  .sp-dauhang .sp-tim { flex: 1 1 100%; }
  .sp-tinhtrang__o, .sp-socot__o { flex: 1 1 45%; }
}

/* ===================== SP-12 — can mep + chua cho huy hieu =============== */
/* 1. Khu dau dung DUNG khung cot cua .sp-khung ben duoi. Khong can bang
   mat, khong go so pixel: cung mot bien --sp-cot-rong va cung mot gap,
   nen mep trai cum dieu khien TRUNG mep trai luoi hang tuyet doi. */
.sp-dauhang {
  display: grid; align-items: center;
  grid-template-columns: var(--sp-cot-rong) minmax(0, 1fr);
  gap: var(--sp-5);
}
.sp-tieude {
  grid-column: 1; min-width: 0; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-dauhang__dk {
  grid-column: 2; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
}
/* Dong cam ket bat dau cung mep voi cum dieu khien */
.sp-camket { margin-left: calc(var(--sp-cot-rong) + var(--sp-5)); }
.sp-mota { margin-left: calc(var(--sp-cot-rong) + var(--sp-5)); }

/* 2. Khung huy hieu LUON co cho, du mon hang khong co bao hanh */
.sp-bhkhung {
  display: flex; align-items: center; min-height: 18px;
}

/* Man hinh hep: luoi ve mot cot -> khu dau cung xep doc, bo thut le */
@media (max-width: 900px) {
  .sp-dauhang { display: flex; flex-wrap: wrap; }
  .sp-tieude { white-space: normal; }
  .sp-camket, .sp-mota { margin-left: 0; }
}

/* ===================== SP-13 — 7 va 8 cot ================================ */
/* B buoc 2: chi o 8 cot moi an ten nhom. Cham mau + chu tinh trang O LAI,
   nen khach van biet con hang hay phai lien he.
   KHONG thu chu duoi 10px · KHONG cat ten nhom thanh "01. CÁP S…" ·
   KHONG bo huy hieu bao hanh. */
.sp-luoi--rathep .sp-the__nhom { display: none; }
.sp-luoi--rathep .sp-the__hang { justify-content: flex-start; }

/* The hep hon thi bot dem ngang mot chut, chu giu nguyen co */
.sp-luoi--hep .sp-the__than { padding-left: 10px; padding-right: 10px; }
.sp-luoi--hep .sp-bh { padding: 2px 5px; }