/* ============================================================
   VIETLINHAI SHOP — Template n8n
   Token lấy nguyên từ landing /khoa-hoc-n8n-hermes/ để hai trang
   không bao giờ lệch tông. Không đặt token trên :root — chỉ trên
   .vs-root và body.vs-woo, để trang khác trong site không bị dính.
   ============================================================ */

.vs-root,
body.vs-woo {
  --vs-navy-900:#071628;
  --vs-navy-800:#0B1F3A;
  --vs-navy-600:#0F2E57;
  --vs-navy-500:#123C73;

  --vs-surface:rgba(255,255,255,.045);
  --vs-surface-2:rgba(255,255,255,.07);
  --vs-line:rgba(255,255,255,.10);
  --vs-line-2:rgba(255,255,255,.17);
  --vs-line-cyan:rgba(53,194,255,.34);

  --vs-text:#E8EDF5;
  --vs-muted:#A2AFC2;
  --vs-dim:#9DACC3;

  --vs-accent:#35C2FF;
  --vs-accent-2:#7ED8FF;
  --vs-accent-soft:rgba(53,194,255,.12);
  --vs-hot:#FF8A3D;

  /* Gradient nút: dừng ở #1479B8 vì đó là điểm sáng nhất còn đạt 4.8:1
     với chữ trắng. Sáng hơn nữa là chữ bắt đầu khó đọc. */
  --vs-btn-1:#1479B8;
  --vs-btn-2:#0D5490;
  --vs-btn-3:#093C70;

  --vs-radius:16px;
  --vs-radius-lg:24px;
  --vs-font:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --vs-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --vs-wrap:1160px;
  --vs-pad:20px;
}

@media (min-width:900px){
  .vs-root, body.vs-woo { --vs-pad:24px; }
}

/* ============================================================
   1. KHUNG CATALOG
   ============================================================ */

/* Full-bleed: thoát khỏi container hẹp của theme mà không phải sửa template.
   calc(50% - 50vw) kéo mép trái ra sát viewport, width:100vw phủ nốt bên phải. */
.vs-root{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--vs-navy-800);
  color:var(--vs-text);
  font-family:var(--vs-font);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  isolation:isolate;
}

.vs-root *,
.vs-root *::before,
.vs-root *::after{ box-sizing:border-box; }

/* :where() => specificity 0, không bao giờ đè lên margin của class thành phần. */
:where(.vs-root) :where(h1,h2,h3,h4,p,ul,ol,li,figure){ margin:0; padding:0; }
.vs-root ul{ list-style:none; }
.vs-root img{ max-width:100%; height:auto; display:block; }
.vs-root a{ color:inherit; text-decoration:none; }
.vs-root button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }

.vs-wrap{
  width:100%;
  max-width:var(--vs-wrap);
  margin-inline:auto;
  padding-inline:var(--vs-pad);
  position:relative;
  z-index:1;
}

.vs-sec{ padding-block:56px; position:relative; }
@media (min-width:900px){ .vs-sec{ padding-block:88px; } }

.vs-sec--combo{ background:var(--vs-navy-600); border-block:1px solid var(--vs-line-cyan); }
.vs-sec--grid{ background:var(--vs-navy-800); }

/* ============================================================
   2. THANH TRÊN CÙNG
   ------------------------------------------------------------
   Tồn tại vì header/footer của theme đang display:none toàn site.
   Không có nó thì khách bấm mua xong không có đường về giỏ hàng.
   ============================================================ */

.vs-bar{
  position:sticky; top:0; z-index:40;
  background:rgba(7,22,40,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vs-line);
}
.vs-bar__in{
  display:flex; align-items:center; gap:16px;
  min-height:60px;
}
.vs-bar__brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; letter-spacing:-.01em; font-size:17px;
  flex:0 0 auto;
}
.vs-bar__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--vs-accent);
  box-shadow:0 0 0 4px rgba(53,194,255,.18);
}
.vs-bar__nav{
  display:none; gap:22px; margin-left:auto;
  font-size:15px; color:var(--vs-muted);
}
.vs-bar__nav a:hover{ color:var(--vs-accent); }
@media (min-width:768px){ .vs-bar__nav{ display:flex; } }

.vs-bar__cart{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--vs-line-2);
  font-size:14px; font-weight:600;
}
@media (min-width:768px){ .vs-bar__cart{ margin-left:0; } }
.vs-bar__cart:hover{ border-color:var(--vs-line-cyan); color:var(--vs-accent); }
.vs-bar__count{
  min-width:20px; height:20px; padding:0 6px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  background:var(--vs-accent); color:var(--vs-navy-900);
  font-size:12px; font-weight:800; line-height:1;
}

/* ============================================================
   3. HERO
   ============================================================ */

.vs-hero{
  position:relative;
  padding-block:52px 44px;
  background:var(--vs-navy-800);
  overflow:hidden;
}
@media (min-width:900px){ .vs-hero{ padding-block:80px 64px; } }

.vs-mesh{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(53,194,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,194,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  /* Lưới tan dần về phía dưới để không đè lên nội dung. */
  -webkit-mask-image:radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 68%);
}

.vs-eyebrow{
  font-family:var(--vs-mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vs-accent);
  margin-bottom:14px !important;
}
.vs-hero__title{
  font-size:clamp(30px, 6vw, 52px);
  line-height:1.1; font-weight:800; letter-spacing:-.02em;
  margin-bottom:16px !important;
}
.vs-hero__sub{
  font-size:clamp(16px, 2.2vw, 19px);
  color:var(--vs-muted);
  max-width:62ch;
  margin-bottom:24px !important;
}
.vs-hero__points{
  display:flex; flex-wrap:wrap; gap:10px;
}
.vs-hero__points li{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:var(--vs-surface);
  border:1px solid var(--vs-line);
  font-size:14px; color:var(--vs-text);
}
.vs-hero__points li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--vs-accent); flex:0 0 auto;
}
.vs-hero__points code{
  font-family:var(--vs-mono); font-size:13px; color:var(--vs-accent-2);
}

/* ============================================================
   4. ĐẦU MỤC SECTION
   ============================================================ */

.vs-sechead{ margin-bottom:32px; max-width:70ch; }
.vs-sechead__title{
  font-size:clamp(24px, 4vw, 36px);
  line-height:1.2; font-weight:800; letter-spacing:-.015em;
  margin-bottom:10px !important;
}
.vs-sechead__sub{ color:var(--vs-muted); font-size:16px; }

/* ============================================================
   5. COMBO
   ------------------------------------------------------------
   Nền sáng hơn lưới template lẻ (--vs-navy-600 vs 800) + viền cyan,
   để khối này tách hẳn ra chứ không lẫn vào danh sách bên dưới.
   ============================================================ */

.vs-combos{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .vs-combos{ grid-template-columns:repeat(2,1fr); gap:24px; } }

.vs-combo{
  display:flex; flex-direction:column;
  padding:24px;
  border-radius:var(--vs-radius-lg);
  background:linear-gradient(160deg, rgba(53,194,255,.10), rgba(255,255,255,.03) 42%);
  border:1px solid var(--vs-line-cyan);
  position:relative;
}
@media (min-width:900px){ .vs-combo{ padding:28px; } }

.vs-combo__top{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.vs-combo__tag{
  font-family:var(--vs-mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--vs-accent);
  padding:5px 11px; border-radius:999px;
  background:var(--vs-accent-soft);
  border:1px solid var(--vs-line-cyan);
}
.vs-combo__off{
  margin-left:auto;
  font-size:14px; font-weight:800;
  color:var(--vs-navy-900);
  background:var(--vs-hot);
  padding:5px 12px; border-radius:999px;
  letter-spacing:-.01em;
}
.vs-combo__title{
  font-size:clamp(20px, 3vw, 25px);
  line-height:1.25; font-weight:800; letter-spacing:-.01em;
  margin-bottom:10px !important;
}
.vs-combo__title a:hover{ color:var(--vs-accent); }
.vs-combo__desc{ color:var(--vs-muted); font-size:15px; margin-bottom:18px !important; }

.vs-combo__list{
  display:grid; gap:9px;
  padding:16px !important;
  border-radius:var(--vs-radius);
  background:rgba(7,22,40,.42);
  border:1px solid var(--vs-line);
  margin-bottom:20px !important;
}
.vs-combo__list li{
  display:flex; align-items:baseline; gap:10px;
  font-size:14.5px;
}
.vs-combo__list a{ flex:1 1 auto; }
.vs-combo__list a:hover{ color:var(--vs-accent); text-decoration:underline; }
.vs-combo__check{
  flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:var(--vs-accent-soft);
  border:1px solid var(--vs-line-cyan);
  position:relative; top:2px;
}
.vs-combo__check::after{
  content:""; position:absolute; left:4px; top:3px;
  width:4px; height:7px;
  border:solid var(--vs-accent); border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg);
}
.vs-combo__unit{
  flex:0 0 auto;
  font-family:var(--vs-mono); font-size:13px;
  color:var(--vs-dim);
  text-decoration:line-through;
  text-decoration-color:rgba(157,172,195,.55);
}

.vs-combo__foot{
  margin-top:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  justify-content:space-between;
}
.vs-combo__pricebox{ display:flex; flex-direction:column; gap:4px; }

/* ============================================================
   6. GIÁ
   ============================================================ */

.vs-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; }

/* Woo bọc giá trong .woocommerce-Price-amount; ép nó thừa hưởng màu
   của del/ins thay vì màu mặc định của theme. */
.vs-price .woocommerce-Price-amount,
.vs-price bdi{ color:inherit; }

.vs-price__was,
.vs-price del{
  color:var(--vs-dim);
  font-size:15px;
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  opacity:.85;
}
.vs-price__now,
.vs-price ins{
  color:var(--vs-accent);
  font-size:24px; font-weight:800; letter-spacing:-.02em;
  text-decoration:none;
  background:none;
}
.vs-combo .vs-price__now{ font-size:28px; }

/* Giá sản phẩm lẻ (Woo tự sinh, không có del/ins). */
.vs-card__foot .vs-price{
  color:var(--vs-accent);
  font-size:21px; font-weight:800; letter-spacing:-.02em;
}

.vs-save{
  font-size:13px; font-weight:600;
  color:var(--vs-hot);
}
.vs-save .woocommerce-Price-amount{ color:inherit; font-weight:700; }

/* ============================================================
   7. BỘ LỌC
   ============================================================ */

.vs-filter{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--vs-line);
}
.vs-filter__pills{ display:flex; flex-wrap:wrap; gap:9px; }

.vs-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--vs-line-2);
  background:var(--vs-surface);
  color:var(--vs-muted);
  font-size:14px; font-weight:600;
  transition:background .15s, color .15s, border-color .15s;
}
.vs-pill:hover{ color:var(--vs-text); border-color:var(--vs-line-cyan); }
.vs-pill.is-on{
  background:var(--vs-accent);
  border-color:var(--vs-accent);
  color:var(--vs-navy-900);
}
.vs-pill__n{
  font-family:var(--vs-mono); font-size:12px;
  opacity:.72; font-weight:700;
}

.vs-search input{
  width:100%; min-width:220px;
  padding:9px 15px; border-radius:999px;
  background:rgba(7,22,40,.55);
  border:1px solid var(--vs-line-2);
  color:var(--vs-text);
  font:inherit; font-size:14px;
}
.vs-search input::placeholder{ color:var(--vs-dim); }
.vs-search input:focus{
  outline:none;
  border-color:var(--vs-accent);
  box-shadow:0 0 0 3px var(--vs-accent-soft);
}

/* ============================================================
   8. LƯỚI TEMPLATE
   ============================================================ */

.vs-grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:560px){ .vs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .vs-grid{ grid-template-columns:repeat(3,1fr); gap:24px; } }

.vs-card{
  display:flex; flex-direction:column;
  border-radius:var(--vs-radius);
  background:var(--vs-surface);
  border:1px solid var(--vs-line);
  overflow:hidden;
  transition:border-color .18s, transform .18s, background .18s;
}
.vs-card:hover{
  border-color:var(--vs-line-cyan);
  background:var(--vs-surface-2);
  transform:translateY(-2px);
}
.vs-card[hidden]{ display:none; }

.vs-card__media{
  position:relative; display:block;
  aspect-ratio:16/9;
  background:var(--vs-navy-900);
  border-bottom:1px solid var(--vs-line);
}
.vs-card__media img{
  width:100%; height:100%; object-fit:cover;
}
/* Sản phẩm chưa gắn ảnh: Woo trả placeholder xám, đè thành nền brand
   + ký hiệu {} cho đỡ trống trải. */
.vs-card__media:empty::after,
.vs-card__media img[src*="placeholder"]{
  opacity:.15;
}
.vs-card__media::before{
  content:"{ }";
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  font-family:var(--vs-mono); font-size:34px; font-weight:700;
  color:rgba(53,194,255,.20);
}
.vs-card__media img{ position:relative; z-index:1; }

.vs-card__badge{
  position:absolute; z-index:2; top:12px; left:12px;
  padding:4px 11px; border-radius:999px;
  background:var(--vs-hot); color:var(--vs-navy-900);
  font-size:12px; font-weight:800; letter-spacing:.01em;
}

.vs-card__body{
  display:flex; flex-direction:column; gap:11px;
  padding:18px;
  flex:1 1 auto;
}
@media (min-width:960px){ .vs-card__body{ padding:20px; } }

.vs-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.vs-chip{
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--vs-accent);
  padding:3px 9px; border-radius:6px;
  background:var(--vs-accent-soft);
}

.vs-card__title{
  font-size:18px; line-height:1.3; font-weight:700; letter-spacing:-.01em;
}
.vs-card__title a:hover{ color:var(--vs-accent); }

.vs-card__desc{
  font-size:14.5px; line-height:1.6;
  color:var(--vs-muted);
  flex:1 1 auto;
}

.vs-demo{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600;
  color:var(--vs-accent);
  padding:6px 12px 6px 8px; border-radius:999px;
  border:1px solid var(--vs-line-cyan);
  background:var(--vs-accent-soft);
  transition:background .15s;
}
.vs-demo:hover{ background:rgba(53,194,255,.2); }
.vs-demo__play{
  width:16px; height:16px; border-radius:50%;
  background:var(--vs-accent);
  position:relative; flex:0 0 auto;
}
.vs-demo__play::after{
  content:""; position:absolute; left:6px; top:4.5px;
  border:solid transparent; border-width:3.5px 0 3.5px 5.5px;
  border-left-color:var(--vs-navy-900);
}

.vs-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding-top:13px;
  border-top:1px solid var(--vs-line);
}

.vs-actions{ display:flex; align-items:center; gap:8px; }

.vs-empty{
  padding:44px 0;
  text-align:center;
  color:var(--vs-muted);
  font-size:16px;
}

/* ============================================================
   9. NÚT
   ============================================================ */

.vs-btn,
body.vs-woo .button,
body.vs-woo button.button,
body.vs-woo a.button,
body.vs-woo .wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--vs-btn-1), var(--vs-btn-2) 55%, var(--vs-btn-3));
  color:#fff !important;
  font-family:var(--vs-font);
  font-size:15px; font-weight:700; letter-spacing:-.005em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:filter .15s, transform .15s, box-shadow .15s;
  box-shadow:0 2px 0 rgba(7,22,40,.4);
}
.vs-btn:hover,
body.vs-woo .button:hover,
body.vs-woo a.button:hover{
  filter:brightness(1.14);
  transform:translateY(-1px);
  color:#fff !important;
}
.vs-btn:focus-visible,
body.vs-woo .button:focus-visible{
  outline:2px solid var(--vs-accent);
  outline-offset:2px;
}

.vs-btn--lg{ padding:14px 26px; font-size:16px; }

.vs-btn--ghost{
  background:transparent;
  border-color:var(--vs-line-2);
  color:var(--vs-text) !important;
  box-shadow:none;
}
.vs-btn--ghost:hover{
  border-color:var(--vs-accent);
  color:var(--vs-accent) !important;
  filter:none;
}

.vs-btn--icon{
  width:38px; height:38px; padding:0;
  font-size:20px; font-weight:400;
  flex:0 0 auto;
}

/* Woo gắn .added / .loading vào nút ajax — cho biết đã bấm ăn. */
.vs-btn.loading{ opacity:.6; pointer-events:none; }
.vs-btn.added::after{ content:"✓"; font-size:14px; }

/* ============================================================
   10. MODAL XEM DEMO
   ============================================================ */

.vs-modal{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  padding:20px;
}
.vs-modal[hidden]{ display:none; }
.vs-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(7,22,40,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.vs-modal__box{
  position:relative;
  width:min(940px, 100%);
  border-radius:var(--vs-radius-lg);
  background:var(--vs-navy-600);
  border:1px solid var(--vs-line-cyan);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.vs-modal__head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--vs-line);
}
.vs-modal__head h4{
  font-size:16px; font-weight:700; color:var(--vs-text);
  flex:1 1 auto; margin:0;
}
.vs-modal__x{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; line-height:1;
  color:var(--vs-muted);
  border:1px solid var(--vs-line-2);
  flex:0 0 auto;
}
.vs-modal__x:hover{ color:var(--vs-text); border-color:var(--vs-accent); }
.vs-modal__frame{
  aspect-ratio:16/9;
  background:#000;
}
.vs-modal__frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   11. TRANG CHI TIẾT — override WooCommerce
   ------------------------------------------------------------
   Không sửa file template của Woo. Chỗ này chỉ sơn lại markup mà
   Woo sinh ra, nên nâng cấp Woo không làm vỡ gì.
   ============================================================ */

body.vs-woo{
  background:var(--vs-navy-800);
  color:var(--vs-text);
  font-family:var(--vs-font);
}
body.vs-woo h1,
body.vs-woo h2,
body.vs-woo h3,
body.vs-woo h4{
  color:var(--vs-text);
  font-family:var(--vs-font);
  letter-spacing:-.015em;
}
body.vs-woo a{ color:var(--vs-accent); }

body.vs-woo .woocommerce-breadcrumb{
  font-size:13.5px; color:var(--vs-dim);
  margin-bottom:22px;
}
body.vs-woo .woocommerce-breadcrumb a{ color:var(--vs-muted); }
body.vs-woo .woocommerce-breadcrumb a:hover{ color:var(--vs-accent); }

body.vs-woo .product_title{
  font-size:clamp(25px, 4vw, 38px);
  line-height:1.2; font-weight:800;
  margin-bottom:14px;
}

body.vs-woo .single-product div.product .price{
  color:var(--vs-accent);
  font-size:30px; font-weight:800; letter-spacing:-.02em;
  margin-bottom:18px;
}
body.vs-woo .single-product div.product .price del{
  color:var(--vs-dim); font-size:18px; font-weight:600; opacity:.85;
}
body.vs-woo .single-product div.product .price ins{
  background:none; color:var(--vs-accent); text-decoration:none;
}

body.vs-woo .woocommerce-product-details__short-description{
  color:var(--vs-muted);
  font-size:16.5px; line-height:1.7;
  margin-bottom:20px;
}

body.vs-woo .woocommerce-product-gallery{
  border-radius:var(--vs-radius-lg);
  overflow:hidden;
  border:1px solid var(--vs-line);
  background:var(--vs-navy-900);
}

/* Ẩn ô số lượng: mỗi template chỉ mua 1 bản, ô nhập số chỉ gây phân vân. */
body.vs-woo .single-product form.cart .quantity{ display:none; }

body.vs-woo .single-product form.cart{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-bottom:8px;
}
body.vs-woo .single-product form.cart .single_add_to_cart_button{
  padding:15px 30px; font-size:16.5px;
}

body.vs-woo .product_meta{
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--vs-line);
  font-size:13.5px; color:var(--vs-dim);
}
body.vs-woo .product_meta a{ color:var(--vs-muted); }

/* --- "Trong bộ có gì" --- */
.vs-inbox{
  margin:0 0 20px;
  padding:16px 18px;
  border-radius:var(--vs-radius);
  background:rgba(53,194,255,.07);
  border:1px solid var(--vs-line-cyan);
}
.vs-inbox__head{
  font-size:14.5px; color:var(--vs-text);
  margin:0 0 12px !important;
}
.vs-inbox__head strong{ color:var(--vs-accent); }
.vs-inbox__list{ display:grid; gap:9px; list-style:none; margin:0; padding:0; }
.vs-inbox__list li{
  display:flex; align-items:baseline; gap:10px;
  font-size:14.5px; color:var(--vs-text);
}
.vs-inbox__list a{ flex:1 1 auto; color:var(--vs-text); }
.vs-inbox__list a:hover{ color:var(--vs-accent); }

/* --- Dòng cam kết dưới nút mua --- */
.vs-assure{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:7px;
  width:100%;
}
.vs-assure li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; color:var(--vs-muted);
}
.vs-assure li::before{
  content:""; flex:0 0 auto;
  width:5px; height:5px; border-radius:50%;
  background:var(--vs-accent);
}

/* --- Video demo --- */
.vs-video{ margin:44px 0 0; }
.vs-video__title{
  font-size:clamp(20px, 3vw, 28px); font-weight:800;
  margin-bottom:16px;
}
.vs-video__frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--vs-radius-lg);
  overflow:hidden;
  border:1px solid var(--vs-line-cyan);
  background:#000;
  cursor:pointer;
}
.vs-video__frame img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.vs-video__frame iframe{ width:100%; height:100%; border:0; display:block; }
.vs-video__play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px; border-radius:50%;
  background:var(--vs-accent);
  display:grid; place-items:center;
  box-shadow:0 8px 34px rgba(53,194,255,.42);
  transition:transform .16s;
}
.vs-video__frame:hover .vs-video__play{ transform:scale(1.07); }
.vs-video__play span{
  width:0; height:0;
  border:solid transparent;
  border-width:13px 0 13px 21px;
  border-left-color:var(--vs-navy-900);
  margin-left:5px;
}

.vs-vidlist{ margin:32px 0 0; }
.vs-vidlist__title{ font-size:19px; font-weight:700; margin-bottom:14px; }
.vs-vidlist__grid{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- Tabs --- */
body.vs-woo .woocommerce-tabs{ margin-top:48px; }
body.vs-woo .woocommerce-tabs ul.tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 !important; margin:0 0 24px !important;
  border-bottom:1px solid var(--vs-line);
  list-style:none;
}
body.vs-woo .woocommerce-tabs ul.tabs::before,
body.vs-woo .woocommerce-tabs ul.tabs li::before,
body.vs-woo .woocommerce-tabs ul.tabs li::after{
  display:none !important; /* Woo vẽ tab bằng border bo tròn kiểu 2013 — bỏ hết. */
}
body.vs-woo .woocommerce-tabs ul.tabs li{
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
}
body.vs-woo .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:11px 4px !important;
  margin-right:20px;
  color:var(--vs-muted) !important;
  font-weight:600; font-size:15.5px;
  border-bottom:2px solid transparent;
}
body.vs-woo .woocommerce-tabs ul.tabs li.active a{
  color:var(--vs-accent) !important;
  border-bottom-color:var(--vs-accent);
}
body.vs-woo .woocommerce-Tabs-panel{
  color:var(--vs-muted); font-size:16px; line-height:1.75;
}
body.vs-woo .woocommerce-Tabs-panel h3{ color:var(--vs-text); margin:22px 0 10px; font-size:19px; }
body.vs-woo .woocommerce-Tabs-panel ul{ padding-left:20px; }
body.vs-woo .woocommerce-Tabs-panel li{ margin-bottom:6px; }
body.vs-woo .woocommerce-Tabs-panel code{
  font-family:var(--vs-mono); font-size:14px;
  color:var(--vs-accent-2);
  background:var(--vs-accent-soft);
  padding:2px 6px; border-radius:5px;
}

/* --- Sản phẩm liên quan / upsell --- */
body.vs-woo .related > h2,
body.vs-woo .upsells > h2{ font-size:24px; font-weight:800; margin-bottom:20px; }
body.vs-woo ul.products{
  display:grid; gap:20px; list-style:none; margin:0; padding:0;
  grid-template-columns:1fr;
}
@media (min-width:700px){ body.vs-woo ul.products{ grid-template-columns:repeat(3,1fr); } }
body.vs-woo ul.products::before,
body.vs-woo ul.products::after{ display:none !important; }
body.vs-woo ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  padding:16px;
  border-radius:var(--vs-radius);
  background:var(--vs-surface);
  border:1px solid var(--vs-line);
  text-align:left;
}
body.vs-woo ul.products li.product:hover{ border-color:var(--vs-line-cyan); }
body.vs-woo ul.products li.product img{
  border-radius:10px; margin-bottom:12px; aspect-ratio:16/9; object-fit:cover;
}
body.vs-woo ul.products li.product .woocommerce-loop-product__title{
  font-size:16px !important; font-weight:700; color:var(--vs-text);
  padding:0 !important; margin-bottom:8px;
}
body.vs-woo ul.products li.product .price{
  color:var(--vs-accent) !important; font-size:18px; font-weight:800;
  display:block; margin-bottom:12px;
}
body.vs-woo ul.products li.product .onsale{ display:none; }

/* ============================================================
   12. GIỎ HÀNG & THANH TOÁN
   ------------------------------------------------------------
   PayOS render QR trong khối .payment_box — giữ nền sáng cho vùng đó
   vì mã QR phải tương phản cao mới quét được bằng camera điện thoại.
   ============================================================ */

body.vs-woo .woocommerce table.shop_table{
  border:1px solid var(--vs-line);
  border-radius:var(--vs-radius);
  border-collapse:separate; border-spacing:0;
  overflow:hidden;
  background:var(--vs-surface);
  color:var(--vs-text);
}
body.vs-woo .woocommerce table.shop_table th,
body.vs-woo .woocommerce table.shop_table td{
  border-color:var(--vs-line) !important;
  color:var(--vs-text);
  padding:14px 16px;
}
body.vs-woo .woocommerce table.shop_table thead th{
  background:rgba(7,22,40,.5);
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--vs-muted);
}
body.vs-woo .woocommerce table.shop_table .amount{ color:var(--vs-accent); font-weight:700; }

body.vs-woo .woocommerce-form__label,
body.vs-woo .woocommerce form .form-row label{
  color:var(--vs-text); font-weight:600; font-size:14.5px;
}
body.vs-woo .woocommerce form .form-row input.input-text,
body.vs-woo .woocommerce form .form-row textarea,
body.vs-woo .woocommerce form .form-row .select2-container .select2-selection{
  background:rgba(7,22,40,.55) !important;
  border:1px solid var(--vs-line-2) !important;
  border-radius:10px !important;
  color:var(--vs-text) !important;
  padding:12px 14px !important;
  font-family:var(--vs-font); font-size:15px;
  height:auto !important;
}
body.vs-woo .woocommerce form .form-row input.input-text:focus,
body.vs-woo .woocommerce form .form-row textarea:focus{
  outline:none;
  border-color:var(--vs-accent) !important;
  box-shadow:0 0 0 3px var(--vs-accent-soft);
}
body.vs-woo .woocommerce form .form-row input.input-text::placeholder{ color:var(--vs-dim); }

body.vs-woo #order_review,
body.vs-woo .woocommerce-checkout-review-order{
  padding:20px;
  border-radius:var(--vs-radius-lg);
  background:var(--vs-navy-600);
  border:1px solid var(--vs-line-cyan);
}
body.vs-woo .woocommerce-checkout #payment{
  background:transparent;
  border-radius:var(--vs-radius);
}
body.vs-woo .woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--vs-line);
  padding:0 0 14px;
}
body.vs-woo .woocommerce-checkout #payment ul.payment_methods li{
  color:var(--vs-text); font-size:15px;
}
body.vs-woo .woocommerce-checkout #payment div.payment_box{
  background:#F4F8FC;
  color:#0B1F3A;
  border-radius:12px;
}
body.vs-woo .woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:#F4F8FC;
}
body.vs-woo .woocommerce-checkout #payment div.payment_box a{ color:#0D5490; }
body.vs-woo #place_order{ width:100%; padding:16px !important; font-size:17px !important; }

body.vs-woo .woocommerce-message,
body.vs-woo .woocommerce-info,
body.vs-woo .woocommerce-error{
  background:var(--vs-surface) !important;
  border-top:3px solid var(--vs-accent) !important;
  border-radius:12px;
  color:var(--vs-text) !important;
}
body.vs-woo .woocommerce-error{ border-top-color:var(--vs-hot) !important; }
body.vs-woo .woocommerce-message::before,
body.vs-woo .woocommerce-info::before{ color:var(--vs-accent) !important; }

/* Trang cảm ơn — khách vừa trả tiền, phải thấy ngay bước tiếp theo. */
body.vs-woo .woocommerce-order{
  max-width:760px; margin-inline:auto;
}
body.vs-woo .woocommerce-thankyou-order-received{
  font-size:24px; font-weight:800; color:var(--vs-accent);
  padding:20px; border-radius:var(--vs-radius);
  background:var(--vs-accent-soft);
  border:1px solid var(--vs-line-cyan);
}

/* ============================================================
   13. TIỆN ÍCH
   ============================================================ */

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  .vs-card, .vs-btn, .vs-video__play{ transition:none !important; }
  .vs-card:hover{ transform:none; }
}