/* ==========================================================================
   Trang Minh — lớp giao diện TikTok Shop
   assets/css/tiktok.css

   Tệp này CHỈ đổi phần trình bày của theme webseo-trangminh.
   Mọi quy tắc đều nằm dưới `.tm-tt` (lớp plugin gắn vào <body>), nên tắt
   plugin là lớp đó biến mất và giao diện trở lại nguyên trạng.

   Tái dùng biến màu sẵn có của theme: --brand, --text, --text-2, --text-3,
   --line, --line-soft, --surface, --ivory, --r, --r-sm, --r-lg, --ff-display.
   Chỉ thêm vào vài biến riêng cho tông đỏ hồng của TikTok.
   ========================================================================== */

/* ------------------------------------------------------ 1. MÀU RIÊNG --- */
.tm-tt{
  --tt-do:#FE2C55;          /* đỏ hồng "hành động mua" */
  --tt-do-dam:#E11945;
  --tt-do-nhat:#FFF0F3;
  --tt-do-vien:#FFD3DC;

  /* dải khuyến mãi: đỏ → cam */
  --tt-a:#FE2C55;
  --tt-b:#FF5C39;
  --tt-c:#FF8A00;

  --tt-bo:999px;            /* nút bo tròn hoàn toàn */
}

/* ==========================================================================
   2. TRANG CHI TIẾT SẢN PHẨM
   ========================================================================== */

/* ---------------------------------------- 2.1 Dải giá kiểu TikTok ------ */
/* JS bọc `[data-wstm-price]` vào trong `.tt-giadai` rồi đặt nhãn khuyến mãi
   làm anh em của nó. Không bao giờ chèn gì VÀO TRONG khối giá, vì main.js
   của theme vẽ lại ruột khối đó mỗi lần khách đổi phân loại.              */
.tm-tt .tt-giadai{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--tt-a) 0%,var(--tt-b) 62%,var(--tt-c) 100%);
  border-radius:var(--r,14px);
  padding:14px 20px;margin:0 0 6px;
}
.tm-tt .tt-giadai--thuong{
  background:var(--ivory,#F0F4FF);
}

/* Khối giá gốc của theme nằm gọn bên trong dải, bỏ nền/viền cũ đi. */
.tm-tt .tt-giadai .wstm-pinfo__price{
  margin:0;padding:0;border:0;background:none;box-shadow:none;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.tm-tt .tt-giadai .wstm-pinfo__price .now{
  color:#fff;font-size:clamp(28px,3.2vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.01em;
}
.tm-tt .tt-giadai .wstm-pinfo__price .old{
  color:rgba(255,255,255,.82);font-size:16px;font-weight:500;
}
.tm-tt .tt-giadai .wstm-pinfo__price .off{
  background:#fff;color:var(--tt-do);
  font-size:13px;font-weight:800;padding:4px 9px;border-radius:7px;
}
/* Sản phẩm "Giá: Liên hệ" thì để nền trung tính, chữ tối cho dễ đọc. */
.tm-tt .tt-giadai--thuong .wstm-pinfo__price .now,
.tm-tt .tt-giadai--thuong .wstm-pinfo__price .ask{color:var(--brand,#1F4FD8)}
.tm-tt .tt-giadai--thuong .wstm-pinfo__price .old{color:var(--text-3,#8C8C8C)}

/* Nhãn "Đang giảm giá / Kết thúc sau …" */
.tm-tt .tt-giadai__nhan{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  color:#fff;text-align:right;
}
.tm-tt .tt-giadai__ten{
  display:inline-flex;align-items:center;gap:7px;
  font-size:16px;font-weight:800;line-height:1.2;
}
.tm-tt .tt-giadai__ten svg{width:17px;height:17px;flex:none}
.tm-tt .tt-giadai__het{font-size:13.5px;font-weight:600;opacity:.95}
.tm-tt .tt-giadai__het b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.tm-tt .tt-giadai + .wstm-pinfo__vat{
  margin:0 0 14px;font-size:12.5px;color:var(--text-3,#8C8C8C);
}

/* ------------------------------ 2.2 Ô chọn phân loại thành thẻ có ảnh -- */
/* Lớp `tt-vars--anh` do JS gắn, chỉ khi biến thể thật sự có ảnh.
   Không có ảnh thì giữ nguyên kiểu nút chữ cũ của theme.                  */
.tm-tt .tt-vars--anh .wstm-vars__opts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.tm-tt .tt-vars--anh .wstm-chip{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;overflow:hidden;height:auto;min-height:0;
  border:2px solid var(--line,#E3E8F2);border-radius:11px;background:#fff;
  text-align:left;transition:border-color .18s ease,transform .18s ease;
}
.tm-tt .tt-vars--anh .wstm-chip:hover{
  border-color:var(--tt-do-vien);transform:translateY(-2px);color:inherit;
}
.tm-tt .tt-vars--anh .wstm-chip.is-on{
  border-color:var(--tt-do);background:var(--tt-do-nhat);color:inherit;
}
.tm-tt .tt-chip__anh{
  display:block;aspect-ratio:1/1;background:var(--ivory,#F0F4FF);overflow:hidden;
}
.tm-tt .tt-chip__anh img{width:100%;height:100%;object-fit:cover;display:block}
.tm-tt .tt-chip__ten{
  display:block;padding:7px 8px 2px;font-size:12.5px;font-weight:600;
  color:var(--text,#2A2A2A);line-height:1.35;
}
.tm-tt .tt-vars--anh .wstm-chip.is-on .tt-chip__ten{color:var(--tt-do)}
.tm-tt .tt-chip__gia{
  display:block;padding:0 8px 8px;font-size:12.5px;font-weight:800;color:var(--tt-do);
}
.tm-tt .tt-chip__gia i{font-style:normal;font-weight:500;font-size:11px;color:var(--text-3,#8C8C8C)}

/* Lưới quá dài thì cho cuộn dọc, giữ nút mua luôn trong tầm mắt. */
.tm-tt .tt-vars--anh .wstm-vars__opts{
  max-height:352px;overflow-y:auto;padding-right:4px;
}
.tm-tt .tt-vars--anh .wstm-vars__opts::-webkit-scrollbar{width:6px}
.tm-tt .tt-vars--anh .wstm-vars__opts::-webkit-scrollbar-thumb{background:var(--line,#E3E8F2);border-radius:3px}

/* ---- Khi biến thể CHƯA có ảnh riêng: nút chữ + giá thật ----
   Hiện đây là trạng thái thật của kho hàng. Vẫn hơn nút chữ trơn vì khách
   thấy luôn giá và mức giảm của từng phiên bản, khỏi phải bấm từng cái. */
.tm-tt .tt-vars--chu .wstm-vars__opts{
  display:flex;flex-wrap:wrap;gap:8px;
}
.tm-tt .tt-vars--chu .wstm-chip{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:8px 14px;height:auto;min-height:0;text-align:left;
  border:1.5px solid var(--line,#E3E8F2);border-radius:10px;background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.tm-tt .tt-vars--chu .wstm-chip:hover{border-color:var(--tt-do-vien);color:inherit}
.tm-tt .tt-vars--chu .wstm-chip.is-on{
  border-color:var(--tt-do);background:var(--tt-do-nhat);color:inherit;
}
.tm-tt .tt-vars--chu .tt-chip__ten{
  padding:0;font-size:14px;font-weight:600;color:var(--text,#2A2A2A);
}
.tm-tt .tt-vars--chu .wstm-chip.is-on .tt-chip__ten{color:var(--tt-do)}
.tm-tt .tt-vars--chu .tt-chip__gia{padding:0;font-size:13px}

/* ---------------------------------------------- 2.3 Nút mua kiểu TikTok */
.tm-tt .wstm-cta .wstm-btn{
  border-radius:var(--tt-bo);font-weight:700;
}
.tm-tt .wstm-cta .wstm-btn--primary{
  background:var(--tt-do);border-color:var(--tt-do);color:#fff;
  box-shadow:0 4px 14px rgba(254,44,85,.28);
}
.tm-tt .wstm-cta .wstm-btn--primary:hover{
  background:var(--tt-do-dam);border-color:var(--tt-do-dam);
  box-shadow:0 8px 22px rgba(254,44,85,.34);
}
.tm-tt .wstm-cta .wstm-btn--ghost{
  background:var(--tt-do-nhat);border-color:var(--tt-do-vien);color:var(--tt-do);
}
.tm-tt .wstm-cta .wstm-btn--ghost:hover{
  background:var(--tt-do);border-color:var(--tt-do);color:#fff;
}

/* Bảng "chọn phân loại" mà theme bật lên khi bấm mua mà chưa chọn */
.tm-tt .wstm-chon__ok{
  background:var(--tt-do);border-color:var(--tt-do);color:#fff;border-radius:var(--tt-bo);
}
.tm-tt .wstm-chon__ok:hover{background:var(--tt-do-dam)}
.tm-tt .wstm-chon__hop{border-radius:20px 20px 0 0}

/* --------------------------------- 2.4 Thanh mua dính đáy (điện thoại) - */
.tm-tt .tt-thanh{display:none}

/* ==========================================================================
   3. GIỎ HÀNG
   ========================================================================== */
.tm-tt--gio .wstm-carttable .product-price .amount,
.tm-tt--gio .wstm-carttable .product-subtotal .amount,
.tm-tt--gio .wstm-carttable .product-subtotal b{
  color:var(--tt-do);font-weight:800;
}
.tm-tt--gio .wstm-summary__row--total b,
.tm-tt--gio .wstm-summary__row--total .amount{color:var(--tt-do)}

.tm-tt--gio .wstm-btn--primary,
.tm-tt--gio .checkout-button{
  background:var(--tt-do);border-color:var(--tt-do);color:#fff;border-radius:var(--tt-bo);
  box-shadow:0 4px 14px rgba(254,44,85,.26);
}
.tm-tt--gio .wstm-btn--primary:hover,
.tm-tt--gio .checkout-button:hover{background:var(--tt-do-dam);border-color:var(--tt-do-dam)}

/* ==========================================================================
   4. THANH TOÁN
   ========================================================================== */
.tm-tt--thanhtoan .wstm-summary__row--total b,
.tm-tt--thanhtoan .wstm-summary__row--total .amount,
.tm-tt--thanhtoan .order-total .amount{color:var(--tt-do)}

.tm-tt--thanhtoan .wstm-btn--primary,
.tm-tt--thanhtoan #place_order{
  background:var(--tt-do);border-color:var(--tt-do);color:#fff;border-radius:var(--tt-bo);
  box-shadow:0 4px 14px rgba(254,44,85,.26);font-weight:700;
}
.tm-tt--thanhtoan .wstm-btn--primary:hover,
.tm-tt--thanhtoan #place_order:hover{background:var(--tt-do-dam);border-color:var(--tt-do-dam)}

/* Ô nhập được bo mềm hơn cho hợp tông */
.tm-tt--thanhtoan .wstm-input,
.tm-tt--gio .wstm-input{border-radius:10px}
.tm-tt--thanhtoan .wstm-input:focus,
.tm-tt--gio .wstm-input:focus{border-color:var(--tt-do);outline-color:var(--tt-do)}

/* ==========================================================================
   5. THANH "ĐẶT HÀNG" DÍNH ĐÁY CỦA THEME (giỏ + thanh toán)
   Theme đã có sẵn `.wstm-dathang`, chỉ đổi màu cho hợp tông TikTok.
   ========================================================================== */
.tm-tt .wstm-dathang__nut{
  background:var(--tt-do);color:#fff;border-radius:var(--tt-bo);font-weight:700;
}
.tm-tt .wstm-dathang__nut:hover{background:var(--tt-do-dam);color:#fff}
.tm-tt .wstm-dathang__tien b,
.tm-tt .wstm-dathang__tien .amount{color:var(--tt-do);font-weight:800}

/* ==========================================================================
   6. THẺ SẢN PHẨM Ở LƯỚI (trang chủ, danh mục, gợi ý)
   Chỉ đổi màu giá và nhãn giảm — không đụng cấu trúc thẻ.
   ========================================================================== */
.tm-tt .wstm-card__price .wstm-price-now,
.tm-tt .wstm-card__price ins,
.tm-tt .wstm-card__price .amount{color:var(--tt-do);font-weight:800}
.tm-tt .wstm-card__off{background:var(--tt-do);color:#fff}
.tm-tt .wstm-card .wstm-btn--primary{
  background:var(--tt-do);border-color:var(--tt-do);border-radius:var(--tt-bo);
}
.tm-tt .wstm-card .wstm-btn--primary:hover{background:var(--tt-do-dam);border-color:var(--tt-do-dam)}

/* ==========================================================================
   7. ĐIỆN THOẠI  (≤ 782px — khớp với ngưỡng theme dùng cho .wstm-dathang)
   ========================================================================== */
@media (max-width:782px){

  /* ---- 7.1 Dải giá xếp dọc cho vừa màn ----
     Không kéo tràn viền bằng margin âm: mỗi trang của theme có lề khác nhau,
     đoán sai là trang bị trôi ngang vài pixel. Giữ trong lề cho chắc. */
  .tm-tt .tt-giadai{
    padding:12px 16px;gap:8px;
  }
  .tm-tt .tt-giadai__nhan{align-items:flex-start;text-align:left}
  .tm-tt .tt-giadai .wstm-pinfo__price .now{font-size:27px}

  /* ---- 7.2 Ô phân loại: 3 cột như ảnh mẫu ---- */
  .tm-tt .tt-vars--anh .wstm-vars__opts{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none;overflow:visible;
  }
  .tm-tt .tt-chip__ten{font-size:11.5px}
  .tm-tt .tt-chip__gia{font-size:11.5px}

  /* ---- 7.3 Thanh mua dính đáy ---- */
  .tm-tt--sp{padding-bottom:76px}

  .tm-tt--sp .tt-thanh{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:960;
    background:#fff;border-top:1px solid var(--line,#E3E8F2);
    box-shadow:0 -3px 18px rgba(14,36,100,.1);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .tm-tt--sp .tt-thanh__ico{
    display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;
    min-width:42px;font-size:10.5px;font-weight:600;color:var(--text-2,#666);
  }
  .tm-tt--sp .tt-thanh__ico svg{width:21px;height:21px}
  .tm-tt--sp .tt-thanh__ico:hover{color:var(--tt-do)}
  .tm-tt--sp .tt-nut{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:0;cursor:pointer;font:inherit;
    background:var(--tt-do);color:#fff;
    padding:12px 20px;border-radius:var(--tt-bo);
    font-size:15.5px;font-weight:700;line-height:1.2;flex:1;
    box-shadow:0 4px 14px rgba(254,44,85,.28);
  }
  .tm-tt--sp .tt-nut:active{transform:translateY(1px)}
  .tm-tt--sp .tt-nut--vien{
    background:var(--tt-do-nhat);color:var(--tt-do);
    box-shadow:none;flex:none;padding:12px 16px;
  }
  .tm-tt--sp .tt-nut svg{width:19px;height:19px}

  /* Thanh điều hướng dưới của theme nhường chỗ cho thanh mua, hai thanh
     cùng bám đáy sẽ chồng lên nhau. Chỉ ẩn ở TRANG SẢN PHẨM. */
  .tm-tt--sp .wstm-mbar{display:none !important}
  /* Nút nổi Zalo/gọi nâng lên khỏi thanh mua */
  .tm-tt--sp .wstm-float{bottom:86px}

  /* Nút mua to trong cột thông tin thành thừa khi đã có thanh dính đáy */
  .tm-tt--sp .wstm-cta:not(.wstm-cta--single){display:none}

  /* ---- 7.4 Giỏ hàng: bảng thu thành thẻ ---- */
  /* Theme đã dùng `shop_table_responsive` (mỗi ô có data-title), nên chỉ cần
     xếp lại thành thẻ là ra đúng kiểu dòng hàng của TikTok.                */
  .tm-tt--gio .wstm-carttable,
  .tm-tt--gio .wstm-carttable tbody,
  .tm-tt--gio .wstm-carttable tr,
  .tm-tt--gio .wstm-carttable td{display:block;width:100%}
  .tm-tt--gio .wstm-carttable thead{display:none}
  .tm-tt--gio .wstm-carttable{border:0;background:none;overflow:visible}

  .tm-tt--gio .wstm-carttable tr.cart_item{
    position:relative;
    background:var(--surface,#fff);border:1px solid var(--line,#E3E8F2);
    border-radius:var(--r,14px);padding:12px 12px 12px 104px;min-height:112px;
    margin-bottom:10px;
  }
  .tm-tt--gio .wstm-carttable tr.cart_item td{
    border:0;padding:0 0 4px;text-align:left;
  }
  /* Ảnh nhảy sang góc trái, phần chữ chạy bên phải */
  .tm-tt--gio .wstm-carttable td.product-thumbnail{
    position:absolute;left:12px;top:12px;width:80px;padding:0;
  }
  .tm-tt--gio .wstm-carttable td.product-thumbnail img{
    width:80px;height:80px;object-fit:cover;border-radius:10px;
  }
  .tm-tt--gio .wstm-carttable td.product-name{
    font-size:14.5px;font-weight:600;line-height:1.4;
  }
  /* Nhãn cột ("Giá", "Số lượng"…) hiện lại cho dễ hiểu khi đã xếp dọc */
  .tm-tt--gio .wstm-carttable td.product-price::before,
  .tm-tt--gio .wstm-carttable td.product-subtotal::before{
    content:attr(data-title) ": ";
    font-size:12.5px;font-weight:500;color:var(--text-3,#8C8C8C);
  }
  .tm-tt--gio .wstm-carttable td.product-price{font-size:15px}
  .tm-tt--gio .wstm-carttable td.product-subtotal{font-size:15px}
  .tm-tt--gio .wstm-carttable td.product-quantity{padding-top:6px}
  /* Ô số lượng của theme căn giữa trong cột bảng; khi xếp dọc phải kéo về trái */
  .tm-tt--gio .wstm-carttable td.product-quantity .quantity,
  .tm-tt--gio .wstm-carttable td.product-quantity > *{margin-left:0;margin-right:auto}
  .tm-tt--gio .wstm-carttable td.product-remove{
    position:absolute;right:10px;top:10px;width:auto;padding:0;
  }
  .tm-tt--gio .wstm-carttable td.product-remove a{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;
    background:var(--ivory,#F0F4FF);color:var(--text-2,#666);font-size:16px;line-height:1;
  }
  .tm-tt--gio .wstm-carttable td.product-remove a:hover{background:var(--tt-do);color:#fff}
}

/* ==========================================================================
   8. MÀN HÌNH LỚN
   ========================================================================== */
@media (min-width:1025px){
  /* Cột mua hẹp nên 4 cột ảnh là vừa; dưới 1025px JS/CSS tự chuyển 3 cột. */
  .tm-tt .tt-vars--anh .wstm-vars__opts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:783px) and (max-width:1024px){
  .tm-tt .tt-vars--anh .wstm-vars__opts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   9. TÔN TRỌNG "GIẢM CHUYỂN ĐỘNG"
   ========================================================================== */
/* ==========================================================================
   NÚT LOA TRÊN VIDEO SẢN PHẨM (27/09/2026)
   Video buộc phải tự chạy tắt tiếng thì trình duyệt mới cho chạy; nút này để
   khách chạm vào là có tiếng, đặt góc dưới trái như TikTok.
   ========================================================================== */
.tm-tt .tt-loa{
  position:absolute;left:12px;bottom:12px;z-index:4;
  width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(12,16,28,.5);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tm-tt .tt-loa svg{width:20px;height:20px}
.tm-tt .tt-loa:hover{background:rgba(12,16,28,.68)}
.tm-tt .tt-loa--bat{background:var(--tt-do,#FE2C55)}
@media (max-width:767px){
  .tm-tt .tt-loa{left:10px;bottom:10px;width:34px;height:34px}
  .tm-tt .tt-loa svg{width:18px;height:18px}
}

@media (prefers-reduced-motion:reduce){
  .tm-tt *,.tm-tt *::before,.tm-tt *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
}

/* =========================================================================
   9. SẢN PHẨM TƯƠNG TỰ — VÒNG QUAY LÚC NẠP THÊM
   ========================================================================= */
.tmtt-lq-moc {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: 12px;
}

.tmtt-lq-quay span {
	display: block;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(15, 23, 42, .12);
	border-top-color: #fe2c55;
	border-radius: 50%;
	animation: tmtt-quay .7s linear infinite;
}

@keyframes tmtt-quay {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.tmtt-lq-quay span { animation-duration: 2.4s; }
}

/* =========================================================================
   10. BẢNG CHỌN PHIÊN BẢN
   ========================================================================= */

/* Giá gốc và mức giảm khi khách đã chọn một phiên bản. */
.tmtt-gia-cu {
	margin-left: 6px;
	font-size: .82em;
	font-weight: 500;
	color: rgba(15, 23, 42, .45);
	text-decoration: line-through;
}

.tmtt-gia-off {
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #fe2c55;
	color: #fff;
	font-size: .72em;
	font-weight: 700;
	vertical-align: middle;
}

/* Trên máy tính bảng chọn đang hẹp bằng điện thoại, mỗi hàng nhét được 4 ô
   nên khách phải cuộn để thấy hết phiên bản. Màn rộng thì cho rộng theo. */
@media (min-width: 768px) {
	.wstm-chon__hop {
		width: min(860px, calc(100vw - 48px));
		max-width: none;
	}

	.wstm-chon__than {
		max-height: min(62vh, 560px);
	}

	/* Thẻ phiên bản dàn đều, không dồn cục một góc. */
	.wstm-chon__than .wstm-vars__ds,
	.wstm-chon__than .wstm-vars__o {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
		gap: 10px;
	}
}