/* ============================================================
   PAGES.CSS — common styles cho các trang tĩnh:
   cart / checkout / single / page / category
   Dùng kèm style.css (header, footer, contact-bar đã share).
   ============================================================ */



/* Inner page header: bỏ absolute, thành sticky đậm */
body.inner-page .header{
  position:sticky;top:0;
  background:rgba(15,12,10,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.inner-page section {
  padding: 30px 0;
  padding-bottom: 15px;
}
/* ============= Page hero (banner top trang con) ============= */
.page-hero{
  position:relative;
  background:linear-gradient(135deg, #1a1411 0%, #0e0a08 100%);
  color:#fff;
  padding:60px 20px 50px;
  text-align:center;
  border-bottom:3px solid var(--c-orange-2);
}
.page-hero.ph-compact{padding:18px 0;text-align:left}
.page-hero.ph-compact .breadcrumb{justify-content:flex-start}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(245,158,11,.12), transparent 60%);
  pointer-events:none;
}
.page-hero h1,
.page-hero .ph-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(32px, 5vw, 54px);
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
  position:relative;
  margin-bottom:10px;
}
.breadcrumb{
  font-size:13px;color:#e8d9c4;letter-spacing:.6px;
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:center;
  position:relative;
}
.breadcrumb a{color:var(--c-orange-2);transition:opacity .2s}
.breadcrumb a:hover{opacity:.7}
.breadcrumb span{opacity:.5}

/* ============= Form elements ============= */
.form-group{display:block;margin-bottom:16px}
.form-group label{
  display:block;font-size:12px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--c-text);margin-bottom:6px;
}
.form-group label .req{color:var(--c-red-600);margin-left:2px}
.form-input,
.form-textarea,
.form-select{
  width:100%;padding:12px 16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  font-family:inherit;font-size:14px;color:var(--c-text);
  transition:border-color .2s, box-shadow .2s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
  outline:0;
  border-color:var(--c-orange-2);
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.form-textarea{min-height:90px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Radio cards */
.radio-group{display:grid;gap:10px}
.radio-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:10px;
  cursor:pointer;transition:all .2s;
  background:#fff;
}
.radio-card:hover{border-color:var(--c-orange-2)}
.radio-card input{margin-top:3px;accent-color:var(--c-red-600);flex-shrink:0}
.radio-card.is-active,
.radio-card:has(input:checked){
  border-color:var(--c-red-600);
  background:#fff8e7;
}
.radio-card .rc-title{
  font-weight:700;font-size:14px;margin-bottom:2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.radio-card .rc-desc{font-size:12.5px;color:var(--c-muted)}
.rc-fee{
  display:inline-block;
  padding:2px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;
  background:rgba(143,11,7,.08);color:var(--c-red-600);
  font-family:'Anton',sans-serif;
}
.rc-fee.is-free{
  background:rgba(15,122,77,.12);color:#0f7a4d;
  text-transform:uppercase;
}

/* ============= Quantity selector ============= */
.qty{
  display:inline-flex;align-items:center;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:999px;
  overflow:hidden;background:#fff;
}
.qty button{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;
  font-size:18px;color:var(--c-text);
  transition:background .15s;
}
.qty button:hover{background:rgba(0,0,0,.05)}
.qty input{
  width:44px;height:36px;
  border:0;text-align:center;
  font-size:14px;font-weight:700;color:var(--c-text);
  background:transparent;
}
.qty input:focus{outline:0}

/* ============= Cart page ============= */
.cart-grid{
  display:grid;grid-template-columns:minmax(0, 1fr) 380px;gap:30px;
  padding:10px 0;
}
/* Left column: cart items + checkout form xếp chồng */
.cart-left{
  display:flex;flex-direction:column;gap:24px;
  min-width:0;
}
.cart-items{
  background:#fff;border-radius:18px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.cart-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:background .15s ease;
  overflow:hidden;             /* an toàn — chống mọi child rogue tràn ra ngoài */
}
.cart-item-img{flex:0 0 72px}
.cart-item-info{
  flex:1 1 180px;              /* min 180px, ưu tiên co lại trước */
  min-width:0;
}
.cart-item .qty{flex:0 0 auto;margin-left:auto}
.cart-item-price{flex:0 0 auto}
.cart-item-remove{flex:0 0 32px}
.cart-item:hover{background:#fbfaf6}
.cart-item:last-child{border-bottom:0}
.cart-item-img{
  width:72px;height:72px;border-radius:10px;
  background-size:cover;background-position:center;
  background-color:var(--c-cream-2);
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.cart-item-info{min-width:0}
.cart-item-info .ci-tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;
  color:var(--c-red-600);text-transform:uppercase;
  padding:2px 8px;background:rgba(143,11,7,.08);
  border-radius:999px;margin-bottom:4px;
}
.cart-item-info .ci-name{
  font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.6px;
  line-height:1.25;color:var(--c-text);
  margin:0 0 3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-item-info .ci-name a{color:inherit;text-decoration:none;transition:color .15s}
.cart-item-info .ci-name a:hover{color:var(--c-red-600)}
.cart-item-info .ci-meta{
  font-size:12.5px;color:var(--c-muted);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-item-info .ci-toppings{
  list-style:none;margin:6px 0 0;padding:0 0 0 10px;
  border-left:2px solid rgba(143,11,7,.18);
  font-size:12.5px;color:#5a5a5a;
}
.cart-item-info .ci-toppings li{
  display:flex;justify-content:space-between;gap:8px;
  padding:1px 0;
}
.cart-item-info .ci-topping-price{color:var(--c-red-600);font-weight:600}

/* Checkout summary toppings */
.cs-line .cs-topping-list{
  display:block;margin-top:2px;
  font-size:11.5px;color:#7a7a7a;font-weight:400;
}

/* Thank-you items toppings */
.ty-item-toppings{
  list-style:none;margin:4px 0 0;padding:0 0 0 10px;
  border-left:2px solid rgba(143,11,7,.18);
  font-size:12px;color:#666;
}
.ty-item-toppings li{padding:1px 0}
.ty-item-toppings span{color:#8f0b07;font-weight:600;margin-left:2px}
.cart-item-price{
  font-family:'Anton',sans-serif;
  color:var(--c-red-600);font-size:17px;letter-spacing:.3px;
  white-space:nowrap;text-align:right;
}
.cart-item-remove{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#bbb;background:transparent;border:0;
  transition:background .15s ease, color .15s ease, transform .15s ease;
  cursor:pointer;
}
.cart-item-remove svg{width:16px;height:16px}
.cart-item-remove:hover{background:rgba(200,16,46,.08);color:var(--c-red-600);transform:scale(1.08)}

/* Qty pill compact hơn trong cart */
.cart-item .qty{border-color:rgba(0,0,0,.08)}
.cart-item .qty button{width:30px;height:30px;font-size:16px}
.cart-item .qty input{width:36px;height:30px;font-size:13px}

.cart-summary{
  background:#fff;border-radius:18px;
  padding:0 22px 3px;
  box-shadow:0 14px 38px -18px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.05);
  align-self:flex-start;position:sticky;top:90px;
  overflow:hidden;
  border:1px solid var(--c-cream-2);
}

/* Header strip — break out 2 bên */
.cart-summary .vts-collapse-head{
  margin:0 -22px 4px;
  padding:18px 22px;
  background:linear-gradient(135deg, #1a1411 0%, #2a1f1b 100%);
}
.cart-summary h3{
  display:flex;align-items:center;gap:10px;
  margin:0;
  color:#fff;
  font-family:'Anton',sans-serif;font-size:18px;letter-spacing:1.4px;
  text-transform:uppercase;
}
.cart-summary h3::before{
  content:"";flex-shrink:0;
  width:22px;height:22px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9b1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect width='8' height='4' x='8' y='2' rx='1'/><path d='M9 14l2 2 4-4'/></svg>") no-repeat center / contain;
}
.cart-summary .vts-collapse-toggle{
  background:rgba(255,255,255,.1);color:#fff;
}
.cart-summary .vts-collapse-toggle:hover{background:rgba(255,255,255,.18);color:#fff}

.cart-summary .cs-line {
  border-bottom: 1px #acacac7d dashed;
}

.cs-line{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;font-size:14px;color:#5a5a5a;
}
.cs-line:first-of-type{padding-top:14px}

/* Gợi ý "Mua thêm Xđ để miễn phí ship" */
.cs-freeship-hint{
  display:flex;align-items:center;gap:6px;
  margin:4px 0 6px;padding:8px 12px;
  background:linear-gradient(135deg, #fff8e7 0%, #fef3c7 100%);
  border-left:3px solid #f59e0b;
  border-radius:8px;
  font-size:12.5px;color:#5a4a1a;line-height:1.45;
}
.cs-freeship-hint svg{color:#f59e0b;flex-shrink:0}
.cs-freeship-hint strong{color:#8f0b07;font-weight:800}

/* Tách items khỏi shipping (checkout): dashed line dưới block items */
.cs-items-list{
  padding:6px 0 12px;
  margin-bottom:6px;
  border-bottom:1px dashed rgba(0,0,0,.14);
}
.cs-items-list .cs-line{padding:6px 0}

/* Tách shipping/discount khỏi coupon: dashed line phía trên cs-coupon */
.cart-summary .cs-coupon{
  position:relative;
  margin-top:18px !important;
}
.cart-summary .cs-coupon::before{
  content:"";
  position:absolute;left:0;right:0;top:-10px;
  border-top:1px dashed rgba(0,0,0,.14);
}
.cs-line strong{color:var(--c-text);font-weight:700}
.cs-line strong[data-vts-discount]{color:var(--c-red-600) !important}

/* "Miễn phí" badge xanh nhỏ — strong ở dòng phí giao không có data-attr nào */
.cs-line:not(.cs-total) strong:not([data-vts-subtotal]):not([data-vts-discount]):not([data-vts-total]){
  display:inline-block;
  padding:3px 10px;border-radius:999px;
  background:rgba(15,122,77,.12);color:#0f7a4d;
  font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}

/* Tổng cộng — card highlight */
.cs-line.cs-total{
  margin:14px -22px 0;padding:18px 22px;
  background:linear-gradient(135deg, #fff8e7 0%, #fbf6ec 100%);
  border-top:2px dashed rgba(143,11,7,.2);
  border-bottom:0;
  font-family:'Anton',sans-serif;font-size:16px;letter-spacing:1.2px;
  color:var(--c-text);text-transform:uppercase;
}
.cs-line.cs-total strong{
  font-family:'Anton',sans-serif;font-size:26px;letter-spacing:.5px;
  color:var(--c-red-600);
  background:none !important;padding:0;text-transform:none;
}

/* CTA buttons spacing */
.cart-summary .btn-block{margin-top:14px;padding: 20px 20px;}
.cart-summary .btn-block:first-of-type{margin-top:10px}
.cart-summary .btn-block:last-of-type{margin-bottom:10px}
.cs-coupon{
  display:flex;align-items:stretch;gap:0;
  margin:14px 0 6px;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cs-coupon:focus-within{
  border-color:var(--c-red-600);
  box-shadow:0 0 0 3px rgba(143,11,7,.12);
}
.cs-coupon .form-input{
  flex:1;min-width:0;
  padding:12px 16px;font-size:13.5px;letter-spacing:.4px;
  border:0;border-radius:0;background:transparent;
  text-transform:uppercase;
}
.cs-coupon .form-input:focus{
  outline:0;border:0;box-shadow:none;
}
.cs-coupon .form-input::placeholder{
  text-transform:none;letter-spacing:0;color:#a8a8a8;
}
/* Coupon submit button — class trực tiếp, không phụ thuộc selector phức */
button.cs-coupon-apply{
  flex-shrink:0;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 20px;min-width:100px;
  border:0;border-left:1.5px solid rgba(0,0,0,.08);
  border-radius:0;
  background:linear-gradient(180deg, var(--c-red-500), var(--c-red-700));
  color:#fff;
  font-family:inherit;
  font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  cursor:pointer;
  transition:filter .2s ease, transform .15s ease;
}
button.cs-coupon-apply:hover{filter:brightness(1.08)}
button.cs-coupon-apply:active{transform:scale(.97)}

.cs-coupon-msg{
  font-size:12.5px;
  min-height:18px;
  margin:0 2px 14px;
  letter-spacing:.2px;
}
.cs-coupon-msg:empty{margin-bottom:8px}

.cart-empty{
  text-align:center;padding:60px 20px;
  background:#fff;border-radius:18px;box-shadow:var(--shadow-card);
}
.cart-empty svg{color:var(--c-muted);margin:0 auto 16px;display:block;opacity:.5}
.cart-empty h3{
  font-family:'Anton',sans-serif;font-size:22px;letter-spacing:2px;
  margin-bottom:8px;
}
.cart-empty p{color:var(--c-muted);margin-bottom:18px}

/* Big CTA buttons (cart/checkout) */
.btn-block{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 20px;border-radius:12px;
  font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;
  cursor:pointer;transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-block.btn-pri{
  background:linear-gradient(180deg,var(--c-red-500),var(--c-red-700));
  color:#fff;box-shadow:var(--shadow-cta);
  margin-bottom:10px;
}
.btn-block.btn-pri:hover{transform:translateY(-2px)}
.btn-block.btn-sec{
  background:transparent;color:var(--c-text);
  border:2px solid var(--c-text);
}
.btn-block.btn-sec:hover{background:var(--c-text);color:var(--c-cream)}

/* ============= Checkout page ============= */
.checkout-grid{
  display:grid;grid-template-columns:1fr 380px;gap:30px;
  padding: 0;
}
.checkout-form-wrap{
  background:#fff;border-radius:18px;
  padding:28px;box-shadow:var(--shadow-card);
}
.checkout-form-wrap h2{
  font-family:'Anton',sans-serif;font-size:22px;letter-spacing:2px;
  margin-bottom:18px;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.checkout-form-wrap .vts-collapse-body h2{margin-top:30px}
.checkout-form-wrap h2 .step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--c-red-600);color:#fff;
  font-size:15px;
}

/* ============= Collapsible sections (mobile cart page) ============= */
.vts-collapse-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.vts-collapse-head h2,
.vts-collapse-head h3{margin-bottom:0}
.vts-collapse-toggle{
  display:none;
  width:36px;height:36px;flex-shrink:0;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--c-muted);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.vts-collapse-toggle:hover{background:rgba(0,0,0,.1);color:var(--c-text)}
.vts-collapse-toggle svg{transition:transform .25s ease}
.vts-collapse-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}
.vts-collapse-body{display:block}

@media (max-width:980px){
  .vts-collapse-toggle{display:inline-flex}
  .checkout-form-wrap.is-collapsed .vts-collapse-head,
  .cart-summary.is-collapsed .vts-collapse-head{margin-bottom:0}
  .checkout-form-wrap.is-collapsed .vts-collapse-body,
  .cart-summary.is-collapsed .vts-collapse-body{display:none}
}

/* ============= Single product page ============= */
.single-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;
  padding:50px 0;align-items:flex-start;    
  padding-top: 0;
  padding-bottom: 0;
}
.single-gallery{position:sticky;top:90px}
.single-main-img{
  position:relative;
  width:100%;aspect-ratio:1;
  border-radius:18px;
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-card);
  margin-bottom:14px;cursor:zoom-in;
  overflow:hidden;
}
.single-main-img .single-tag{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-red-600);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  z-index:2;pointer-events:none;
}
.single-main-img .single-tag .tag-icon{flex-shrink:0}
.single-main-img .single-tag.tag-loved{background:#1f3b8b}
.single-main-img .single-tag.tag-full{background:#0f7a4d}
.single-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.single-thumbs > div{
  aspect-ratio:1;border-radius:10px;
  background-size:cover;background-position:center;
  cursor:pointer;border:2px solid transparent;
  transition:border-color .2s;
}
.single-thumbs > div.is-active,
.single-thumbs > div:hover{border-color:var(--c-orange-2)}

.single-info h1{
  font-family:'Anton',sans-serif;font-size:clamp(28px, 4vw, 30px);
  letter-spacing:2px;line-height:1.5;
  margin-bottom:12px;text-transform:uppercase;
}
.single-rating{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  color:#b3261e;font-size:13px;font-weight:600;
  background:#fff1ee;border:1px solid #ffd6cc;
  padding:5px 10px;border-radius:999px;
}
.single-rating .sold-icon{color:#ff5a1f;flex-shrink:0}
.single-rating .stars{color:var(--c-orange);font-size:16px;letter-spacing:2px}
.single-price{
  font-family:'Anton',sans-serif;
  color:var(--c-red-600);font-size:38px;letter-spacing:1px;
  margin-bottom:8px;
}
.single-price .old{
  font-size:20px;color:var(--c-muted);
  text-decoration:line-through;margin-left:12px;letter-spacing:0;
}
.single-desc{
  color:var(--c-text);font-size:14.5px;line-height:1.7;
  margin:10px 0;
  padding:18px 0;
  border-top:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
}
/* Khối thông số sản phẩm: 2 cột card đều, icon trái + label/value cột phải */
.single-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:0 0 22px;
  font-size:13.5px;color:var(--c-text);
}
.single-meta > div{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  padding:12px 14px;
  background:linear-gradient(135deg, #fbf6ec 0%, #fff8e7 100%);
  border:1px solid var(--c-cream-2);
  border-radius:12px;
  min-width:0;
  word-break:break-word;
}
.single-meta .meta-icon{
  flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(143,11,7,.08);
  color:var(--c-red-600);
}
.single-meta .meta-icon svg{display:block}
.single-meta .meta-text{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.single-meta .label{
  display:block;
  font-size:10.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:#9a9a9a;
}
.single-meta .meta-value{
  font-size:14px;font-weight:600;color:var(--c-text);
  line-height:1.35;
}
.single-meta .meta-text > strong{
  display:inline-block;width:fit-content;
  color:#0f7a4d;
  font-size:12px;font-weight:700;letter-spacing:.3px;
}

@media (max-width:980px){
  .single-meta{gap:8px}
  .single-meta > div{padding:10px 12px;gap:10px}
  .single-meta .meta-icon{width:34px;height:34px}
  .single-meta .meta-icon svg{width:16px;height:16px}
}
@media (max-width:480px){
  .single-meta{gap:0px;margin: 0 0 15px;}
  .single-meta > div{padding:10px 8px}
  .single-meta .label {font-size: 9px; }
}
.single-actions{
  display:flex;flex-direction:column;gap:14px;align-items:stretch;
  margin-bottom:18px;
}
/* Qty riêng 1 hàng, content-width */
.single-actions > .qty{align-self:flex-start}
/* Group 2 nút "Thêm vào giỏ" + "Mua ngay" cùng 1 hàng */
.single-actions-buttons{
  display:flex;gap:12px;flex-wrap:wrap;
}
.single-actions-buttons > .btn{
  flex:1 1 0;min-width:160px;
  justify-content:center;text-align:center;
}

/* Topping list (single product page) */
.single-toppings{
  flex:1 1 100%;
  margin:0 0 6px;
  padding:16px 18px;
  background:linear-gradient(135deg, #fffaf0 0%, #fff 100%);
  border:1px solid var(--c-cream-2);
  border-radius:12px;
}
.single-toppings-head{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--c-red-600);
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px dashed rgba(143,11,7,.15);
}
.topping-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:8px;
}
.topping-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  user-select:none;
}
.topping-row:hover{border-color:var(--c-orange-2);transform:translateY(-1px)}
.topping-row input[type="checkbox"]{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.topping-check{
  flex-shrink:0;
  width:20px;height:20px;border-radius:6px;
  border:1.5px solid rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.topping-check svg{opacity:0;color:#fff;transition:opacity .15s ease}
.topping-row:has(input:checked){
  background:#fff8e7;
  border-color:var(--c-red-600);
}
.topping-row:has(input:checked) .topping-check{
  background:var(--c-red-600);border-color:var(--c-red-600);
}
.topping-row:has(input:checked) .topping-check svg{opacity:1}
.topping-name{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--c-text);
}
.topping-icon{font-size:15px;line-height:1}
.topping-price{
  flex-shrink:0;
  font-family:'Anton', sans-serif;
  font-size:14px;color:var(--c-red-600);letter-spacing:.4px;
}
.single-extra{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:24px;
  padding-top:24px;border-top:1px solid rgba(0,0,0,.08);
}
.single-extra .feat-line{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--c-muted);
}
.single-extra svg{color:var(--c-orange-2)}

/* Tabs (single product description) */
.tabs{
  margin-top:40px;
  background:#fff;border-radius:18px;
  box-shadow:var(--shadow-card);overflow:hidden;
}
.tabs-nav{
  display:flex;border-bottom:1px solid rgba(0,0,0,.06);
}
.tabs-nav button{
  flex:1;padding:16px 20px;background:transparent;cursor:pointer;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;
  color:var(--c-muted);
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.tabs-nav button.is-active{
  color:var(--c-red-600);
  border-bottom-color:var(--c-red-600);
}
.tabs-panel{padding:24px 28px;font-size:14px;line-height:1.7;display:none}
.tabs-panel.is-active{display:block}

/* Default list (e.g. Mô tả) — bullet đơn giản */
.tabs-panel ul{padding-left:22px;margin:8px 0}
.tabs-panel li{margin:4px 0}

/* Tab Thành phần — grid chip có check icon */
.tabs-panel[data-tab="ing"] ul{
  list-style:none;
  margin:8px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.tabs-panel[data-tab="ing"] li{
  position:relative;
  display:flex;align-items:center;gap:10px;
  margin:0;padding:12px 14px;
  background:linear-gradient(135deg, #fff 0%, #fffaf0 100%);
  border:1px solid var(--c-cream-2);
  border-left:3px solid var(--c-red-600);
  border-radius:10px;
  font-weight:600;color:var(--c-text);font-size:13.5px;
  transition:transform .15s ease, box-shadow .15s ease, border-left-color .15s ease;
}
.tabs-panel[data-tab="ing"] li::before{
  content:"";flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  background-color:rgba(143,11,7,.1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f0b07' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>");
  background-size:13px 13px;
  background-repeat:no-repeat;
  background-position:center;
}
.tabs-panel[data-tab="ing"] li:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px -6px rgba(143,11,7,.18);
  border-left-color:var(--c-orange-2);
}

/* ============= Reviews tab ============= */
.vts-tab-count{margin-left:6px;font-weight:600;opacity:.7}

.vts-stars{display:inline-flex;gap:2px;color:#d1d5db;font-size:16px;line-height:1}
.vts-stars .vts-star.is-on{color:#f59e0b}
.vts-stars .vts-star.is-half{
  background:linear-gradient(90deg,#f59e0b 50%,#d1d5db 50%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.vts-reviews{display:flex;flex-direction:column;gap:24px}

.vts-reviews-summary{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  padding:18px 20px;border:1px solid var(--c-cream-2);
  background:linear-gradient(135deg,#fff 0%,#fffaf0 100%);
  border-radius:14px;
}
.vts-reviews-avg{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px}
.vts-reviews-avg-num{font-size:34px;font-weight:800;color:var(--c-red-600);line-height:1}
.vts-reviews-avg .vts-stars{font-size:18px}
.vts-reviews-count{font-size:12.5px;color:var(--c-muted);font-weight:600}

.vts-reviews-breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.vts-reviews-breakdown li{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:10px;font-size:13px}
.vts-reviews-breakdown-label{color:var(--c-muted);font-weight:700}
.vts-reviews-breakdown-bar{position:relative;height:8px;background:#f3f0eb;border-radius:999px;overflow:hidden}
.vts-reviews-breakdown-bar > span{display:block;height:100%;background:#f59e0b;border-radius:999px;transition:width .3s ease}
.vts-reviews-breakdown-num{text-align:right;color:var(--c-muted);font-variant-numeric:tabular-nums}

.vts-reviews-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vts-review{padding:14px 16px;border:1px solid var(--c-cream-2);border-radius:12px;background:#fff}
.vts-review-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.vts-review-author{font-weight:700;color:var(--c-text)}
.vts-review-date{font-size:12px;color:var(--c-muted);margin-left:auto}
.vts-review-body{font-size:14px;line-height:1.65;color:var(--c-text)}
.vts-review-body p{margin:0 0 6px}

.vts-reviews-empty{
  margin:0;padding:18px 20px;border:1px dashed var(--c-cream-2);border-radius:12px;
  text-align:center;color:var(--c-muted);font-size:13.5px;
}

.vts-review-form{
  padding:18px 20px;border-radius:14px;background:#fffaf0;
  border:1px solid var(--c-cream-2);display:flex;flex-direction:column;gap:14px;
}
.vts-review-form-title{margin:0;font-size:16px;font-weight:800;color:var(--c-red-600)}
.vts-review-field{display:flex;flex-direction:column;gap:6px}
.vts-review-field label{font-size:13px;font-weight:700;color:var(--c-text)}
.vts-review-field .req{color:var(--c-red-600)}
.vts-review-field input,
.vts-review-field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--c-cream-2);
  border-radius:10px;background:#fff;font:inherit;color:var(--c-text);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.vts-review-field input:focus,
.vts-review-field textarea:focus{
  outline:none;border-color:var(--c-red-600);
  box-shadow:0 0 0 3px rgba(143,11,7,.12);
}
.vts-review-field textarea{resize:vertical;min-height:96px}
.vts-review-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.vts-rating-picker{display:inline-flex;gap:4px}
.vts-rating-star{
  border:0;background:transparent;cursor:pointer;
  font-size:28px;line-height:1;color:#d1d5db;padding:2px 4px;
  transition:color .12s ease,transform .12s ease;
}
.vts-rating-star.is-hover,
.vts-rating-star.is-on{color:#f59e0b}
.vts-rating-star:hover{transform:scale(1.08)}
.vts-rating-star:focus-visible{outline:2px solid var(--c-red-600);outline-offset:2px;border-radius:4px}

.vts-review-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vts-review-message{margin:0;font-size:13px}
.vts-review-message.is-success{color:#16a34a;font-weight:600}
.vts-review-message.is-error{color:#b91c1c;font-weight:600}

@media (max-width:640px){
  .vts-reviews-summary{grid-template-columns:1fr;gap:16px;text-align:center}
  .vts-reviews-avg{flex-direction:row;justify-content:center}
  .vts-review-field-row{grid-template-columns:1fr}
  .vts-review-date{margin-left:0}
}

/* ============= Tra cứu đơn (lookup page) ============= */
.vts-lookup-wrap{max-width:520px;margin:0 auto;padding:30px 0}
.vts-lookup-card{
  background:#fff;border-radius:18px;
  padding:36px 32px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--c-cream-2);
  text-align:center;
}
.vts-lookup-icon{
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(143,11,7,.1), rgba(245,158,11,.18));
  color:var(--c-red-600);
}
.vts-lookup-card h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(22px, 3.4vw, 30px);
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.vts-lookup-sub{
  color:var(--c-muted);font-size:14px;line-height:1.55;
  max-width:380px;margin:0 auto 22px;
}
.vts-lookup-form{text-align:left;margin-top:8px}
.vts-lookup-form .btn-block{margin-top:8px}
.vts-lookup-code-input{
  font-family:'Anton',sans-serif;
  letter-spacing:1px;text-transform:uppercase;
}
.vts-lookup-error{
  display:flex;align-items:flex-start;gap:8px;text-align:left;
  margin:0 0 18px;padding:12px 14px;
  background:#fff5f5;
  border:1px solid rgba(220,38,38,.25);
  border-left:3px solid var(--c-red-600);
  border-radius:10px;
  color:#8f0b07;font-size:13.5px;line-height:1.5;
}
.vts-lookup-error svg{flex-shrink:0;margin-top:1px}
.vts-lookup-hint{
  margin-top:18px;padding-top:18px;
  border-top:1px dashed rgba(0,0,0,.1);
  font-size:13px;color:var(--c-muted);
}
.vts-lookup-hint a{color:var(--c-red-600);font-weight:700;text-decoration:none}
.vts-lookup-hint a:hover{text-decoration:underline}

@media (max-width:640px){
  .vts-lookup-card{padding:28px 22px;border-radius:14px}
  .vts-lookup-icon{width:54px;height:54px}
}

/* ============= Đơn gần nhất (floating card góc phải) =============
   Vị trí: fixed bottom-right, bên trên contact-bar pill nhưng dưới header
   nên không đè cart icon ở header. Trên mobile contact-bar full-width nên
   đẩy widget cao thêm. */
.vts-last-order{
  position:fixed;
  right:18px;
  bottom:135px;          /* trên contact-bar pill (bottom:14px, height ~46px) */
  z-index:55;
  width:300px;max-width:calc(100vw - 28px);
  background:#fff;
  border:1px solid var(--c-cream-2);
  border-radius:16px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.08);
  opacity:0;transform:translate(12px, 8px);pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.18,.89,.32,1.18);
}
.vts-last-order.is-visible{opacity:1;transform:translate(0,0);pointer-events:auto}

/* Top accent strip để widget nổi bật trên ảnh hero */
.vts-last-order::before{
  content:"";
  display:block;height:4px;
  background:linear-gradient(90deg, var(--c-red-500) 0%, var(--c-orange-2) 100%);
  border-radius:16px 16px 0 0;
}

.vts-lob-inner{
  display:grid;
  grid-template-columns:40px 1fr auto;
  grid-template-areas:
    "icon info close"
    "cta  cta  cta";
  gap:10px 12px;
  padding:14px 16px 16px;
}
.vts-lob-icon{
  grid-area:icon;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(143,11,7,.12), rgba(245,158,11,.18));
  color:var(--c-red-600);
}
.vts-lob-info{grid-area:info;min-width:0;line-height:1.3}
.vts-lob-title{
  font-weight:800;font-size:12.5px;color:var(--c-text);
  letter-spacing:.3px;margin-bottom:3px;
  text-transform:uppercase;
}
.vts-lob-meta{
  font-size:12px;color:#5a5a5a;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  line-height:1.35;
}
.vts-lob-code{
  font-family:'Anton',sans-serif;letter-spacing:.5px;color:var(--c-red-600);
  font-size:12.5px;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vts-lob-total{font-weight:800;color:var(--c-text)}
.vts-lob-sep{opacity:.35}

.vts-lob-cta{
  grid-area:cta;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;font-size:12px;
  border-radius:10px;
  width:100%;
}
.vts-lob-cta.is-loading{opacity:.65;pointer-events:none}

.vts-lob-close{
  grid-area:close;
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:#bbb;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.vts-lob-close:hover{background:rgba(0,0,0,.06);color:var(--c-text)}

@media (max-width:640px){
  .vts-last-order{
    right:12px;bottom:80px;
    width:calc(100vw - 24px);
  }
  .vts-lob-inner{padding:12px 14px 14px;gap:8px 10px}
}
@media (max-width:480px){
  /* contact-bar đã chiếm full đáy ~50px → đẩy widget cao thêm để khỏi đè */
  .vts-last-order{bottom:64px}
}

/* ============= Sticky mobile order bar (single product) ============= */
.vts-sticky-order-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;
  align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  border-top:1px solid var(--c-cream-2);
  box-shadow:0 -10px 28px -10px rgba(0,0,0,.18);
  transform:translateY(120%);
  transition:transform .28s cubic-bezier(.18,.89,.32,1.18);
}
.vts-sticky-order-bar.is-visible{transform:translateY(0)}
.vts-sob-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.vts-sob-label{
  font-size:10.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:#9a9a9a;
}
.vts-sob-price{
  font-family:'Anton',sans-serif;
  font-size:22px;letter-spacing:.5px;color:var(--c-red-600);
}
.vts-sob-actions{display:flex;align-items:stretch;gap:8px;flex-shrink:0}
.vts-sob-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;cursor:pointer;
  font-family:inherit;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  border-radius:12px;
  transition:filter .2s ease, transform .15s ease;
}
.vts-sob-btn:active{transform:scale(.97)}
.vts-sob-add{
  width:48px;height:48px;
  background:rgba(143,11,7,.08);color:var(--c-red-600);
}
.vts-sob-add:hover{background:rgba(143,11,7,.16)}
.vts-sob-add.is-loading{opacity:.6;pointer-events:none}
.vts-sob-add.is-added{background:#0f7a4d;color:#fff}
.vts-sob-buy{
  height:48px;padding:0 22px;font-size:13px;
  background:linear-gradient(180deg, var(--c-red-500), var(--c-red-700));
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(143,11,7,.55);
}
.vts-sob-buy:hover{filter:brightness(1.06)}

/* Show on tablet/mobile only — desktop already has the sticky right column. */
@media (max-width:980px){
  .vts-sticky-order-bar{display:flex}
  /* Đẩy contact-bar lên trên sticky bar để 2 thanh không chồng nhau. */
  body.single-san_pham .contact-bar{bottom:78px}
}
@media (max-width:480px){
  .vts-sob-price{font-size:20px}
  .vts-sob-buy{padding:0 16px;font-size:12px;letter-spacing:.5px}
  body.single-san_pham .contact-bar{bottom:64px}
}

/* ============= Page (generic content) ============= */
.page-content{
  max-width:820px;margin:0 auto;
  padding:30px 20px;
  font-size:15px;line-height:1.8;color:var(--c-text);
}
.page-content h2{
  font-family:'Anton',sans-serif;font-size:28px;letter-spacing:2px;
  margin:32px 0 12px;text-transform:uppercase;
}
.page-content h3{
  font-size:18px;font-weight:700;letter-spacing:.5px;
  margin:22px 0 10px;
}
.page-content p{margin-bottom:14px}
.page-content ul,.page-content ol{
  padding-left:24px;margin-bottom:14px;
}
.page-content li{margin:4px 0}
.page-content img{
  border-radius:14px;margin:20px 0;
  box-shadow:var(--shadow-card);
}
.page-content blockquote{
  border-left:4px solid var(--c-orange-2);
  padding:8px 0 8px 18px;margin:18px 0;
  color:var(--c-muted);font-style:italic;
}
.page-content a{color:var(--c-red-600);text-decoration:underline}

/* ============= Category page ============= */
.category-page{padding:15px 0}
.category-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;margin-bottom:24px;
}
.category-count{font-size:13.5px;color:var(--c-muted)}
.category-sort{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--c-muted);
}
.category-sort select{
  padding:8px 14px;border-radius:8px;
  border:1px solid rgba(0,0,0,.12);background:#fff;
  font-size:13px;cursor:pointer;
}
.category-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.category-grid .combo-card{margin:0}

/* Pagination — hỗ trợ cả markup tay (.pagination > a) và the_posts_pagination() (.nav-links > .page-numbers) */
.pagination,
nav.pagination{
  display:flex;justify-content:center;align-items:center;
  gap:8px;margin-top:40px;
  flex-wrap:wrap;
}
.pagination .nav-links{
  display:flex;justify-content:center;align-items:center;
  gap:8px;flex-wrap:wrap;
}
.pagination .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.pagination > a, .pagination > span,
.pagination .page-numbers{
  min-width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:10px;
  font-size:14px;font-weight:700;
  background:#fff;color:var(--c-text);
  border:1px solid rgba(0,0,0,.08);
  transition:all .2s;
  text-decoration:none;
}
.pagination a:hover,
.pagination .page-numbers:not(.current):not(.dots):hover{
  border-color:var(--c-red-600);color:var(--c-red-600);
  transform:translateY(-1px);
}
.pagination .is-active,
.pagination .page-numbers.current{
  background:linear-gradient(180deg, var(--c-red-500), var(--c-red-700));
  color:#fff;border-color:var(--c-red-600);
  cursor:default;
  box-shadow:0 4px 14px -6px rgba(143,11,7,.5);
}
.pagination .pg-disabled,
.pagination .page-numbers.dots{
  opacity:.4;pointer-events:none;border-color:transparent;background:transparent;
}
.pagination .prev,
.pagination .next{
  font-size:18px;font-weight:400;
}

/* ============= Blog archive ============= */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.blog-grid--2col{grid-template-columns:repeat(2,1fr)}
.blog-card{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .3s, box-shadow .3s;
  display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.14)}
.blog-cover{
  aspect-ratio:16/10;
  background-size:cover;background-position:center;
  position:relative;
}
.blog-cover .blog-cat{
  position:absolute;top:14px;left:14px;
  background:var(--c-red-600);color:#fff;
  padding:5px 12px;border-radius:6px;
  font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
}
.blog-body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.blog-meta{
  font-size:12px;color:var(--c-muted);
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  letter-spacing:.4px;flex-wrap:wrap;
}
.blog-meta svg{flex-shrink:0;opacity:.7}
.blog-meta .dot{opacity:.4}
.blog-title{
  font-family:'Anton',sans-serif;font-size:20px;letter-spacing:1px;
  text-transform:uppercase;line-height:1.25;
  margin-bottom:8px;
}
.blog-title a{color:var(--c-text);transition:color .2s;line-height:1.4}
.blog-title a:hover{color:var(--c-red-600)}
.blog-excerpt{
  font-size:13.5px;color:var(--c-muted);line-height:1.55;
  margin-bottom:14px;flex:1;
}
.blog-readmore{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--c-red-600);align-self:flex-start;
  transition:gap .2s;
}
.blog-readmore:hover{gap:10px}

/* ============= Single blog ============= */
.blog-hero-cover{
  width:100%;aspect-ratio:16/6;max-height:480px;
  background-size:cover;background-position:center;
  margin-bottom:30px;
}
.blog-article{
  max-width:780px;margin:0 auto;padding:0 20px 30px;
}
.blog-article-head{text-align:center;margin-bottom:30px}
.blog-article-head .blog-cat{
  display:inline-block;
  background:var(--c-red-600);color:#fff;
  padding:5px 14px;border-radius:6px;
  font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:14px;
}
.blog-article-head h1{
  font-family:'Anton',sans-serif;font-size:clamp(28px, 4vw, 44px);
  letter-spacing:2px;line-height:1.15;
  text-transform:uppercase;
  margin-bottom:14px;
}
.blog-article-head .blog-meta{justify-content:center;font-size:13px}

.blog-tags{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:32px;padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
}
.blog-tags strong{font-size:13px;color:var(--c-muted);margin-right:4px}
.blog-tags .tag{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--c-cream-2);color:var(--c-text);
  font-size:12px;font-weight:600;letter-spacing:.4px;
  transition:background .2s, color .2s;
}
.blog-tags .tag:hover{background:var(--c-red-600);color:#fff}

.blog-author{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border-radius:14px;padding:18px 22px;
  margin-top:24px;box-shadow:var(--shadow-card);
}
.blog-author .avatar{
  width:56px;height:56px;border-radius:50%;
  background-size:cover;background-position:center;flex-shrink:0;
  border:2px solid var(--c-cream-2);
}
.blog-author .au-name{font-weight:800;font-size:14.5px;margin-bottom:2px}
.blog-author .au-role{font-size:12px;color:var(--c-orange);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.blog-author .au-bio{font-size:13px;color:var(--c-muted);line-height:1.5}

.share-buttons{
  display:flex;gap:10px;margin-top:20px;align-items:center;flex-wrap:wrap;
}
.share-buttons span{font-size:13px;font-weight:700;color:var(--c-muted)}
.share-buttons a{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-cream-2);color:var(--c-text);
  transition:transform .2s, background .2s, color .2s;
}
.share-buttons a:hover{transform:translateY(-2px);background:var(--c-red-600);color:#fff}

/* ============= Responsive ============= */
@media (max-width:980px){
  .page-hero{padding:46px 28px 36px}
  .page-hero h1,
  .page-hero .ph-title{font-size:clamp(26px, 6vw, 40px);letter-spacing:2px;word-break:break-word}
  .page-hero .breadcrumb{font-size:12px}
  .cart-grid,
  .checkout-grid,
  .single-grid{
    grid-template-columns:1fr;gap:24px;
    padding:30px 0;
  }


  .cart-summary,.single-gallery{position:static}
  .category-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .form-row{grid-template-columns:1fr}
}

@media (max-width:640px){
  .page-hero{padding:38px 24px 28px}
  .cart-item{gap:12px;padding:14px;border-bottom: 1px solid rgb(0 0 0 / 11%);}
  .cart-item-img{flex:0 0 64px;width:64px;height:64px}
  .cart-item-info{flex:1 1 calc(100% - 90px)}   /* info chiếm hết hàng đầu, đẩy qty+price+remove sang hàng 2 */
  .cart-item-remove{margin-left:auto}
  .cart-item-price{font-size:17px}
  .cart-item-info .ci-name{font-size:15px}
  .cart-summary, .checkout-form-wrap{padding:0 18px;}
  #checkout{padding:18px;}
  .single-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .tabs-nav button{padding:20px 10px;font-size:11.5px}
  .tabs-panel{padding:16px 18px}
  .category-grid{grid-template-columns:1fr;gap:16px}
  .blog-grid{grid-template-columns:1fr;gap:18px}
  .blog-hero-cover{aspect-ratio:16/9}

  .related-title h2{font-size: clamp(17px, 4vw, 44px);}
  .related-title {margin-bottom: 20px;}
  .footer-cta {padding-top: 30px !important;}
  .combo-card{max-width: 100%;}
  .single-actions-buttons > .btn {font-size: 13px;padding: 14px;gap: 8px;}
  .tabs {margin-top: 11px;}
  .inner-page section {padding: 10px 0px;}
  .checkout-form-wrap h2 {font-size: 17px;}
  .page-template-page-cart section {padding: 10px 0;}
  .single-grid{padding:10px 0;}
  .single .page-content {padding: 20px 20px;}
  .single-info h1 {font-size: clamp(20px, 4vw, 44px);}
  .single-rating {margin-bottom: 10px;}.single-desc {margin: 10px 0 }
}

@media (max-width:980px) and (min-width:641px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============= THANK YOU PAGE ============= */
.thank-you{
  position:relative;
  padding:60px 0 80px;
  background:
    radial-gradient(900px 400px at 50% -100px, rgba(15,122,77,.08), transparent 65%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-2) 100%);
}
.ty-card{
  max-width:780px;margin:0 auto;
  background:#fff;border-radius:24px;
  border:1px solid var(--c-cream-2);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.05);
  overflow:hidden;
}
.ty-head{
  text-align:center;
  padding:35px 28px 28px;
  background:linear-gradient(180deg, #ffffff 0%, #fff8e7 100%);
  border-bottom:1px dashed rgba(0,0,0,.08);
  position:relative;
}
.ty-check{
  width:84px;height:84px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg, #2f9e60, #1f7a47);
  color:#fff;
  box-shadow:0 14px 28px -10px rgba(31,122,71,.6);
  animation:vts-pop .5s cubic-bezier(.18,.89,.32,1.28) both;
}
.ty-check svg{width:42px;height:42px}
@keyframes vts-pop{
  0%{transform:scale(.4) rotate(-12deg);opacity:0}
  70%{transform:scale(1.08) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.ty-head h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(28px, 4.5vw, 40px);
  letter-spacing:2px;
  color:var(--c-text);
  margin-bottom:10px;
}
.ty-sub{
  color:#5a5a5a;font-size:15px;
  max-width:540px;margin:0 auto 18px;line-height:1.55;
}
.ty-code{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;
  border:1.5px dashed var(--c-red-600);
  border-radius:12px;
  background:#fff;
}
.ty-code-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#7a7a7a;text-transform:uppercase}
.ty-code strong{
  font-family:'Anton',sans-serif;
  font-size:18px;letter-spacing:1px;color:var(--c-red-600);
}
.ty-copy{
  width:28px;height:28px;border-radius:8px;
  border:0;background:rgba(143,11,7,.08);color:var(--c-red-600);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s;
}
.ty-copy:hover{background:rgba(143,11,7,.16)}
.ty-copy.is-copied{background:#2f9e60;color:#fff}
.ty-meta-time{
  margin-top:12px;font-size:12.5px;color:#8a8a8a;letter-spacing:.4px;
}

.ty-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:#fafaf6;
}
.ty-block{
  padding:24px 28px;
  background:#fff;
  border-right:1px dashed rgba(0,0,0,.08);
  border-bottom:1px dashed rgba(0,0,0,.08);
}
.ty-block:last-child{border-right:0}
.ty-block h3{
  display:flex;align-items:center;gap:8px;
  font-family:'Anton',sans-serif;
  font-size:16px;letter-spacing:1.5px;
  color:var(--c-red-600);
  margin-bottom:16px;text-transform:uppercase;
  padding-bottom:12px;
  border-bottom:1px solid rgba(143,11,7,.12);
}
.ty-block h3 svg{color:var(--c-red-600);flex-shrink:0}

.ty-info{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
.ty-info > li{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 4px;
  border-radius:8px;
  transition:background .15s ease;
}
.ty-info > li:hover{background:rgba(143,11,7,.03)}
.ty-info-icon{
  flex-shrink:0;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(143,11,7,.08);
  color:var(--c-red-600);
  border-radius:50%;
  margin-top:2px;
}
.ty-info > li > div{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.ty-info-label{
  font-size:11px;font-weight:700;letter-spacing:.8px;
  color:#9a9a9a;text-transform:uppercase;
}
.ty-info-value{
  font-size:14px;color:var(--c-text);line-height:1.5;
  word-break:break-word;
}
.ty-info-value a{color:var(--c-red-600);text-decoration:none;font-weight:600}
.ty-info-value a:hover{text-decoration:underline}

.ty-bank-note{
  margin-top:16px;padding:14px 16px;
  background:linear-gradient(135deg, #fff8e7 0%, #fef3c7 100%);
  border-left:3px solid #f59e0b;
  border-radius:8px;font-size:13px;line-height:1.6;color:#5a4a1a;
}
.ty-bank-note strong{
  display:block;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:#92400e;margin-bottom:4px;
}
.ty-bank-note > div{margin-top:2px}

.ty-items{padding:24px 28px}
.ty-items h3{
  font-family:'Anton',sans-serif;
  font-size:16px;letter-spacing:1.5px;
  color:var(--c-red-600);
  margin-bottom:14px;text-transform:uppercase;
}
.ty-items table{
  width:100%;border-collapse:collapse;font-size:14px;
}
.ty-items th,.ty-items td{padding:10px 8px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left}
.ty-items th{font-size:11.5px;letter-spacing:.6px;color:#888;font-weight:700;text-transform:uppercase}
.ty-items .num{text-align:right;white-space:nowrap}
.ty-items tfoot th{
  border-bottom:0;padding-top:8px;padding-bottom:6px;
  font-size:13px;color:#5a5a5a;text-transform:none;letter-spacing:0;font-weight:600;
}
.ty-items tfoot td{
  border-bottom:0;padding-top:8px;padding-bottom:6px;font-weight:700;
}
.ty-items tfoot td.discount{color:var(--c-red-600)}
.ty-items tfoot tr.ty-total-row th{
  border-top:1.5px dashed rgba(0,0,0,.18);padding-top:14px;
  font-family:'Anton',sans-serif;font-size:15px;letter-spacing:1px;color:var(--c-text);text-transform:uppercase;
}
.ty-items tfoot tr.ty-total-row td.total{
  border-top:1.5px dashed rgba(0,0,0,.18);padding-top:14px;
  font-family:'Anton',sans-serif;font-size:24px;letter-spacing:.6px;color:var(--c-red-600);
}

.ty-foot{
  padding:18px 28px 28px;background:#fbf6ec;
  border-top:1px dashed rgba(0,0,0,.08);
}
.ty-thanks{
  margin:0;font-size:13.5px;color:#5a5a5a;line-height:1.6;text-align:center;
}
.ty-thanks a{color:var(--c-red-600);text-decoration:none}

.ty-lookup-hint{
  margin:10px 0 0;text-align:center;
  font-size:12.5px;color:#7a7a7a;line-height:1.55;
}
.ty-lookup-hint a{color:var(--c-red-600);text-decoration:none;font-weight:700}
.ty-lookup-hint a:hover{text-decoration:underline}

.ty-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:28px;
}
.ty-actions .btn{padding:14px 24px;font-weight:700}

.ty-fallback .ty-fallback-body{padding:24px 28px;font-size:15px;line-height:1.7;color:var(--c-text)}

@media (max-width:640px){
  .thank-you{padding:30px 0 60px}
  .ty-card{margin:0 14px;border-radius:18px}
  .ty-head{padding:40px 20px 22px}
  .ty-check{width:68px;height:68px;margin-bottom:14px}
  .ty-check svg{width:34px;height:34px}
  .ty-grid{grid-template-columns:1fr}
  .ty-block{border-right:0;padding:20px 22px}
  .ty-items{padding:20px 22px}
  .ty-items th,.ty-items td{padding:8px 4px;font-size:13px}
  .ty-items tfoot tr.ty-total-row td.total{font-size:20px}
  .ty-foot{padding:18px 22px 22px}
  .ty-actions{margin:15px}
  .ty-actions .btn{flex:1 1 calc(50% - 12px);justify-content:center}
  .thank-you .container{padding:0}
  .ty-copy{display: none;}
  .ty-code {flex-direction: column;padding: 8px 20px;}
}

/* ============= PRINT (lưu hoá đơn) ============= */
@media print{
  body{background:#fff !important}
  .header,.footer-cta,.contact-bar,.top-btn,
  .lightbox,.no-print,.ty-actions{display:none !important}
  .thank-you{padding:0;background:none}
  .ty-card{
    box-shadow:none !important;border:1px solid #ccc;border-radius:8px;
    max-width:100%;page-break-inside:avoid;
  }
  .ty-head{background:#fff !important;border-bottom:1px solid #ccc}
  .ty-check{background:#fff !important;color:#000 !important;box-shadow:none !important;border:2px solid #000}
  .ty-grid{grid-template-columns:1fr 1fr}
  .ty-block{border-right:1px solid #ccc;border-bottom:1px solid #ccc}
  .ty-foot{background:#fff !important}
  a{color:#000 !important;text-decoration:none}
}

/* ============= 404 PAGE ============= */
.error-404{
  position:relative;
  padding:80px 0 30px!important;
  background:
    radial-gradient(1200px 500px at 50% -120px, rgba(143,11,7,.08), transparent 70%),
    linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-2) 100%);
  overflow:hidden;
}

.error-404::before,
.error-404::after{
  content:"";
  position:absolute;
  top:60px;
  width:180px;height:180px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.5;
  pointer-events:none;
}
.error-404::before{left:-30px;background-image:url('../images/tia-trai.png')}
.error-404::after{right:-30px;background-image:url('../images/tia-phai.png')}

.e404-card{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
  padding:56px 40px 48px;
  background:#fff;
  border-radius:24px;
  border:1px solid var(--c-cream-2);
  box-shadow:0 30px 60px -25px rgba(143,11,7,.18), 0 8px 24px rgba(0,0,0,.05);
  text-align:center;
}

.e404-rabbit{
  width:84px;height:84px;
  margin:-104px auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg, var(--c-red-500), var(--c-red-700));
  color:#fff;
  box-shadow:0 14px 28px -10px rgba(143,11,7,.55);
  border:6px solid #fff;
}
.e404-rabbit svg{width:42px;height:42px}

.e404-code{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:'Anton', 'Be Vietnam Pro', sans-serif;
  font-size:160px;
  line-height:1;
  letter-spacing:-4px;
  color:var(--c-red-600);
  margin-bottom:8px;
  text-shadow:0 6px 0 rgba(143,11,7,.08);
}
.e404-code .e404-zero{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:1em;height:1em;
  color:var(--c-text);
  animation:e404-bob 2.4s ease-in-out infinite;
}
.e404-code .e404-zero svg{width:.78em;height:.78em}

@keyframes e404-bob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-8px) rotate(3deg)}
}

.e404-title{
  font-size:28px;
  line-height:1.25;
  margin:6px 0 10px;
  color:var(--c-text);
  font-weight:800;
}
.e404-sub{
  font-size:16px;
  color:#5a5a5a;
  max-width:520px;
  margin:0 auto 28px;
}

.e404-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:32px;
}
.e404-ctas .btn{
  padding:14px 26px;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;
}

.e404-search{
  border-top:1px dashed var(--c-cream-2);
  padding-top:24px;
  margin-top:8px;
}
.e404-search-label{
  font-size:13px;
  color:#7a7a7a;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}
.e404-search .search-form{
  display:flex;gap:8px;
  max-width:460px;margin:0 auto;
}
.e404-search .search-form input[type="search"]{
  flex:1;
  padding:12px 16px;
  border:1.5px solid var(--c-cream-2);
  border-radius:10px;
  font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.e404-search .search-form input[type="search"]:focus{
  outline:0;
  border-color:var(--c-red-600);
  box-shadow:0 0 0 3px rgba(143,11,7,.12);
}
.e404-search .search-form button{
  padding:12px 22px;
  font-weight:700;
}

@media (max-width:640px){
  .error-404{padding:60px 0 80px}
  .error-404::before,.error-404::after{width:120px;height:120px;top:30px;opacity:.35}
  .e404-card{padding:44px 22px 36px;border-radius:20px;margin:0 14px}
  .e404-rabbit{width:72px;height:72px;margin-top:-92px}
  .e404-rabbit svg{width:36px;height:36px}
  .e404-code{font-size:110px}
  .e404-title{font-size:22px}
  .e404-sub{font-size:15px}
  .e404-ctas .btn{flex:1 1 auto;justify-content:center}
  .e404-search .search-form{flex-direction:column}
  .e404-search .search-form button{width:100%}
}

/* ============= TRANG LIÊN HỆ ============= */
.contact-section{padding:48px 0}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:stretch;
}
.contact-info,
.contact-form-wrap{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:var(--shadow-card);
}
.contact-col-title{
  font-family:'Anton','Segoe UI',sans-serif;
  font-size:22px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--c-red-700);margin:0 0 8px;
}
.contact-col-sub{
  color:var(--c-muted);font-size:14px;line-height:1.55;margin:0 0 22px;
}
.contact-info-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;
}
.contact-info-list li{
  display:flex;gap:14px;align-items:flex-start;
}
.contact-info-list .ci-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:rgba(143,11,7,.08);color:var(--c-red-700);
  display:inline-flex;align-items:center;justify-content:center;
}
.contact-info-list .ci-label{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-muted);
  margin-bottom:2px;
}
.contact-info-list .ci-value{font-size:15px;font-weight:600;color:#1f1410;line-height:1.5}
.contact-info-list .ci-value a{color:inherit;text-decoration:none}
.contact-info-list .ci-value a:hover{color:var(--c-red-700)}
.contact-socials{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;
  border-top:1px dashed rgba(0,0,0,.1);
}
.contact-socials a{
  display:inline-flex;align-items:center;padding:8px 14px;
  background:#fbf2e3;color:#1f1410;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.6px;text-decoration:none;
  transition:background .2s,color .2s;
}
.contact-socials a:hover{background:var(--c-red-700);color:#fff}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form .form-group{margin-bottom:16px}
.contact-form label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:#1f1410;margin-bottom:6px;
}
.contact-form label .req{color:var(--c-red-700)}
.contact-form .form-input{
  width:100%;padding:12px 14px;border:1px solid var(--c-line);
  border-radius:10px;font-size:14px;font-family:inherit;color:#1f1410;
  background:#fff;transition:border-color .2s,box-shadow .2s;
}
.contact-form .form-input:focus{
  outline:none;border-color:var(--c-red-700);
  box-shadow:0 0 0 3px rgba(143,11,7,.12);
}
.contact-form textarea.form-input{resize:vertical;min-height:120px}
.contact-alert{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;
  font-size:13.5px;font-weight:600;margin-bottom:18px;
}
.contact-alert-success{background:rgba(31,122,71,.1);color:#1f7a47}
.contact-alert-error{background:rgba(143,11,7,.08);color:var(--c-red-700)}

.contact-map-section{padding:0 0 60px}
.contact-map-title{margin-bottom:18px}
.contact-map{
  position:relative;width:100%;height:var(--map-h, 420px);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);border:1px solid var(--c-line);
}
.contact-map iframe{width:100%;height:100%;border:0;display:block}

@media (max-width:860px){
  .contact-section{padding:32px 0}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-info,
  .contact-form-wrap{padding:24px 20px}
  .contact-form .form-row{grid-template-columns:1fr}
  .contact-map-section{padding:0 0 40px}
}