/* =====================================================================
   VietDiesel theme skin — nền tối + vàng gold, bám theo mockup đã duyệt.
   Nạp SAU theme.css (unlayered → thắng Bootstrap @layer). Sửa file này
   + bump ?v= trong _partials/head.tpl (block vietdiesel_skin).
   ===================================================================== */

:root{
  --vd-gold:#F2AD0F; --vd-gold-hi:#ffca57; --vd-gold-deep:#c98a06;
  --vd-slate:#253237;
  --vd-bg:#0c1417; --vd-bg2:#0f1b1f; --vd-surface:#152227; --vd-surface2:#1b2c32;
  --vd-line:rgba(255,255,255,.08); --vd-line2:rgba(242,173,15,.28);
  --vd-text:#e9eff1; --vd-muted:#9fb0b6; --vd-muted2:#7f9199;
  --vd-green:#37f08a; --vd-red:#ff4d4d;
  --vd-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --vd-radius:16px;
  --vd-head:'Oswald',system-ui,sans-serif;
  --vd-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Bootstrap 5.3 overrides */
  --bs-body-bg:var(--vd-bg);
  --bs-body-color:var(--vd-text);
  --bs-body-font-family:var(--vd-body);
  --bs-emphasis-color:#fff;
  --bs-secondary-color:var(--vd-muted);
  --bs-tertiary-color:var(--vd-muted2);
  --bs-primary:var(--vd-gold);
  --bs-primary-rgb:242,173,15;
  --bs-link-color:var(--vd-gold-hi);
  --bs-link-color-rgb:255,202,87;
  --bs-link-hover-color:var(--vd-gold);
  --bs-border-color:var(--vd-line);
  --bs-body-bg-rgb:12,20,23;
  --bs-tertiary-bg:var(--vd-bg2);
  --bs-tertiary-bg-rgb:15,27,31;
  --bs-secondary-bg:var(--vd-surface);
  --bs-secondary-bg-rgb:21,34,39;
  --bs-heading-color:#fff;
}

/* ---------- base ---------- */
body{
  background:var(--vd-bg);
  color:var(--vd-text);
  font-family:var(--vd-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{
  font-family:var(--vd-head);
  font-weight:600;
  letter-spacing:.3px;
  color:#fff;
}
a{color:var(--vd-gold-hi);text-decoration:none}
a:hover{color:var(--vd-gold)}
hr{border-color:var(--vd-line);opacity:1}
.text-muted,.text-secondary{color:var(--vd-muted)!important}
:focus-visible{outline-color:var(--vd-gold)}

/* ---------- buttons ---------- */
.btn{border-radius:11px;font-weight:600;transition:.22s}
.btn-primary,.btn-secondary.btn--buy,.add-to-cart{
  background:linear-gradient(180deg,var(--vd-gold-hi),var(--vd-gold));
  border:none;color:#1a1205;
  box-shadow:0 12px 30px -12px rgba(242,173,15,.55);
}
.btn-primary:hover,.add-to-cart:hover{
  background:linear-gradient(180deg,var(--vd-gold),var(--vd-gold-deep));
  color:#1a1205;transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgba(242,173,15,.7);
}
.btn-outline-primary,.btn-secondary,.btn-tertiary{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);color:#fff;
}
.btn-outline-primary:hover,.btn-secondary:hover{
  background:rgba(255,255,255,.09);color:#fff;border-color:var(--vd-line2);
}

/* ---------- surfaces / cards ---------- */
.card,.block,.page-content,.elementor-widget,
.product-miniature .card,.card-block{
  background:var(--vd-surface);
  border:1px solid var(--vd-line);
  border-radius:var(--vd-radius);
  color:var(--vd-text);
}
.page-header,.page-footer{background:transparent}

/* ---------- forms ---------- */
.form-control,.form-select,.input-group-text,select,textarea,
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search]{
  background:var(--vd-bg2);
  border:1px solid var(--vd-line);
  color:var(--vd-text);
  border-radius:10px;
}
.form-control:focus,.form-select:focus,input:focus,textarea:focus{
  background:var(--vd-bg2);color:var(--vd-text);
  border-color:var(--vd-gold);
  box-shadow:0 0 0 3px rgba(242,173,15,.14);
}
.form-control::placeholder,input::placeholder{color:var(--vd-muted2)}

/* ---------- header (tạm — sẽ override template sau) ---------- */
.header,#header,.header-top,.header-nav{
  background:rgba(12,20,23,.92);
  border-bottom:1px solid var(--vd-line);
  color:var(--vd-text);
}
.header a,.main-menu a,.menu a{color:var(--vd-muted)}
.header a:hover,.main-menu a:hover{color:#fff}
.main-menu .top-menu a[data-depth="0"]{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px}

/* ---------- footer ---------- */
.footer,#footer,.footer-container,.page-footer{
  background:var(--vd-slate);
  border-top:1px solid var(--vd-line);
  color:var(--vd-muted);
}
.footer a{color:var(--vd-muted)}
.footer a:hover{color:var(--vd-gold-hi)}
.footer h3,.footer .h3,.footer-title{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:1px;color:#fff}

/* ---------- product card ---------- */
.product-miniature{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:var(--vd-radius);overflow:hidden;transition:.25s}
.product-miniature:hover{transform:translateY(-6px);border-color:var(--vd-line2);box-shadow:var(--vd-shadow)}
.product-miniature .product-title a{color:var(--vd-text)}
.product-miniature .product-title a:hover{color:var(--vd-gold-hi)}
.product-price-and-shipping .price,.product-price,.price{color:var(--vd-gold-hi);font-family:var(--vd-head)}
.regular-price{color:var(--vd-muted2);text-decoration:line-through}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:var(--vd-bg2);border:1px solid var(--vd-line);border-radius:12px}
.breadcrumb a{color:var(--vd-muted)}
.breadcrumb a:hover{color:var(--vd-gold-hi)}
.breadcrumb .active,.breadcrumb-item.active{color:var(--vd-text)}

/* ---------- misc dark surfaces ---------- */
.table{color:var(--vd-text);--bs-table-color:var(--vd-text);--bs-table-border-color:var(--vd-line)}
.dropdown-menu{background:var(--vd-surface);border-color:var(--vd-line)}
.dropdown-item{color:var(--vd-text)}
.dropdown-item:hover{background:var(--vd-surface2);color:var(--vd-gold-hi)}
.modal-content,.offcanvas{background:var(--vd-surface);color:var(--vd-text)}
.alert{border-radius:12px}
.badge.bg-primary{background:var(--vd-gold)!important;color:#1a1205}

/* ============ HEADER TICKER + HABACHAT BUBBLE ============ */
.vd-topbar{background:var(--vd-slate);border-bottom:1px solid var(--vd-line);overflow:hidden}
.vd-topbar__promo{overflow:hidden}
.vd-topbar__track{display:inline-flex;white-space:nowrap;font-size:12.5px;color:var(--vd-muted);line-height:36px;animation:vd-ticker 36s linear infinite}
.vd-topbar__track b{color:var(--vd-gold-hi)}
.vd-topbar:hover .vd-topbar__track{animation-play-state:paused}
@keyframes vd-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.vd-hbc{position:fixed;right:22px;bottom:22px;z-index:1050;width:58px;height:58px;border-radius:18px 18px 5px 18px;background:linear-gradient(135deg,var(--vd-gold-hi),var(--vd-gold-deep));color:#1a1205;display:grid;place-items:center;box-shadow:0 16px 34px -10px rgba(242,173,15,.6);transition:.2s}
.vd-hbc:hover{transform:translateY(-3px);color:#1a1205}
.vd-hbc svg{width:28px;height:28px}
.vd-hbc .on{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--vd-green);border:2px solid var(--vd-bg)}

/* ============ HEADER refinements ============ */
.header-top{background:var(--vd-slate);border-bottom:1px solid var(--vd-line);font-size:12.5px;color:var(--vd-muted)}
.header-top a{color:var(--vd-muted)} .header-top a:hover{color:var(--vd-gold-hi)}
.header-bottom{background:rgba(12,20,23,.94);border-bottom:1px solid var(--vd-line)}
.header-nav-full-width{background:var(--vd-bg2);border-bottom:1px solid var(--vd-line)}
.top-menu a[data-depth="0"],.main-menu .top-menu a{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;font-weight:500;color:var(--vd-muted)}
.top-menu a[data-depth="0"]:hover,.main-menu a:hover{color:#fff}
.header-block__icon,.header .material-icons{color:var(--vd-muted)}
.header-block__badge{background:var(--vd-gold);color:#1a1205}
.search-widget input[type=text]{background:var(--vd-bg2);border-color:var(--vd-line);color:var(--vd-ink)}

/* ============ PRODUCT MINIATURE (match mockup) ============ */
.product-miniature{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px;overflow:hidden;transition:.25s}
.product-miniature:hover{transform:translateY(-6px);border-color:var(--vd-line2);box-shadow:var(--vd-shadow)}
.product-miniature .thumbnail-container,.product-miniature .product-thumbnail{background:linear-gradient(160deg,#20343b,#101d21)}
.product-miniature .product-title a{font-family:var(--vd-body);font-weight:600;color:var(--vd-ink)}
.product-miniature .product-title a:hover{color:var(--vd-gold-hi)}
.product-miniature .price,.product-price-and-shipping .price{font-family:var(--vd-head);font-size:20px;color:var(--vd-gold-hi)}
.product-miniature .regular-price{color:var(--vd-muted2)}

/* ============ NEWSLETTER band ============ */
.block-newsletter,.ps-emailsubscription,.email-subscription{background:var(--vd-slate)}
.block-newsletter input[type=email]{background:var(--vd-bg2);border-color:var(--vd-line);color:var(--vd-ink)}

/* ============ CATEGORY / LISTING ============ */
.page-category #wrapper,.page-category #content-wrapper{background:var(--vd-bg)}
.page-title-section,.category h1,.block-category h1{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;color:#fff}
.category__description,.category__description.rich-text,.category-additional-description{color:var(--vd-muted)}
.category__cover img,.category-cover img{border-radius:14px;border:1px solid var(--vd-line)}

/* left column: category tree + facets as dark cards */
#left-column .block,.left-column .block,#search_filters,.search-filters,.faceted-search,.facets-container,.category-tree{
  background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:14px;padding:16px 16px}
#left-column .block+ .block,.left-column .block+.block{margin-top:16px}
.block .title,.facet__title,.facet .h6,.facet-title,.category-tree>.h6,.block-categories .h6{
  font-family:var(--vd-head);text-transform:uppercase;letter-spacing:1px;font-size:13px;color:#fff}
.category-tree__item-link,.category-tree__child a,.block-categories a{color:var(--vd-muted)}
.category-tree__item-link:hover,.block-categories a:hover{color:var(--vd-gold-hi)}
.category-tree__item--current>.category-tree__item-header .category-tree__item-link{color:var(--vd-gold-hi)}
.facet__label,.facet-label,.facet a{color:var(--vd-muted)}
.facet__label:hover,.facet a:hover{color:var(--vd-gold-hi)}
.custom-checkbox input[type=checkbox]:checked+span,.facet .custom-checkbox input:checked+span{background:var(--vd-gold);border-color:var(--vd-gold)}
.facet .facet-title{color:#fff}
.magnitude,.facet__magnitude{color:var(--vd-muted2)}

/* active filters chips */
.active-filters{background:transparent;border:none;padding:0;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.active-filters .active-filter,.active-filters li,.filter-block{background:rgba(242,173,15,.1);border:1px solid var(--vd-line2);color:var(--vd-gold-hi);border-radius:999px;padding:5px 12px;font-size:12.5px}
.active-filters .js-search-filters-clear-all{color:var(--vd-gold-hi)}

/* sort toolbar */
.products__selection,.products-nb,.total-products{color:var(--vd-muted)}
.products__sort-label{color:var(--vd-muted2);font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;font-size:12px}
.products__sort-dropdown-button,.btn-outline-tertiary{background:var(--vd-surface);border:1px solid var(--vd-line);color:var(--vd-text);border-radius:10px}
.products__sort-dropdown-button:hover{border-color:var(--vd-line2);color:#fff}

/* pagination */
.pagination__number,.pagination__nav a,.pagination__nav span,.page-list .page-link{min-width:42px;height:42px;border:1px solid var(--vd-line);border-radius:10px;color:var(--vd-muted);display:inline-flex;align-items:center;justify-content:center;font-family:var(--vd-head);padding:0 8px}
.pagination__number:hover,.page-list .page-link:hover{border-color:var(--vd-line2);color:#fff}
.pagination__number--current,.pagination__number.current,.page-item.active .page-link{background:var(--vd-gold);color:#1a1205;border-color:var(--vd-gold)}

/* ============ FIX: gold buttons (Bootstrap --bs-btn-bg) + product price ============ */
.btn-primary,.product-miniature__add.btn-primary,.btn-primary.btn-square-icon,.add-to-cart{
  --bs-btn-bg:var(--vd-gold);--bs-btn-border-color:var(--vd-gold);
  --bs-btn-hover-bg:var(--vd-gold-deep);--bs-btn-hover-border-color:var(--vd-gold-deep);
  --bs-btn-active-bg:var(--vd-gold-deep);--bs-btn-active-border-color:var(--vd-gold-deep);
  --bs-btn-color:#1a1205;--bs-btn-hover-color:#1a1205;--bs-btn-active-color:#1a1205;--bs-btn-disabled-bg:var(--vd-gold-deep);
  background:linear-gradient(180deg,var(--vd-gold-hi),var(--vd-gold))!important;border-color:var(--vd-gold)!important;color:#1a1205!important;
}
.btn-primary:hover,.product-miniature__add.btn-primary:hover,.add-to-cart:hover{background:linear-gradient(180deg,var(--vd-gold),var(--vd-gold-deep))!important;color:#1a1205!important}
.product-miniature__price{color:var(--vd-gold-hi)!important;font-family:var(--vd-head);font-size:20px;font-weight:600}
.product-miniature__prices{color:var(--vd-gold-hi)}
.product-miniature__discount-price{color:var(--vd-muted2)!important;text-decoration:line-through;font-size:13px}
.product-miniature__regular-price{color:var(--vd-muted2)!important}
.quantity-button .btn,.btn.increment,.btn.decrement,.btn-square-icon.btn-tertiary{background:var(--vd-surface2);border:1px solid var(--vd-line);color:var(--vd-text)}
.quantity-button .btn:hover{color:var(--vd-gold)}

/* ============ PRODUCT PAGE ============ */
.product__name{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;color:#fff}
.product__prices,.product__prices-block,.product__prices-inline{color:var(--vd-gold-hi)}
.product__price{color:var(--vd-gold-hi)!important;font-family:var(--vd-head);font-size:34px;line-height:1}
.product__price--regular,.product__regular-price,.regular-price{color:var(--vd-muted2)!important;text-decoration:line-through}
.product__reference,.product-reference span{color:var(--vd-muted2)}
.product__cover,.product-cover,.js-qv-product-cover{border:1px solid var(--vd-line);border-radius:16px;background:linear-gradient(160deg,#16262c,#0b1518)}
.product__thumbnail-image,.product__thumbnail{border-radius:12px}
.product__thumbnail-image{border:1px solid var(--vd-line)}
.product__thumbnail.active .product__thumbnail-image,.js-thumb-selected{border-color:var(--vd-gold);outline-color:var(--vd-gold)}
.product-information,.product__information,.product-description-short{color:var(--vd-text)}
/* tabs */
.tabs,.product__tabs{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px;padding:6px 20px 20px}
.nav-tabs{border-bottom:1px solid var(--vd-line)}
.nav-tabs .nav-link,.tabs .nav-link{color:var(--vd-muted);font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;border:none;border-bottom:2px solid transparent;background:transparent}
.nav-tabs .nav-link:hover{color:#fff}
.nav-tabs .nav-link.active,.tabs .nav-link.active{color:var(--vd-gold);border-bottom-color:var(--vd-gold);background:transparent}
.tab-pane,.product-tab-content{color:var(--vd-muted)}
/* product flags (badges) */
.product-flag,.product-flags li span,.product-flag.new,.product-flag.discount{background:var(--vd-gold);color:#1a1205;font-family:var(--vd-head);border-radius:999px}
.product-flag.on-sale,.product-flag.discount{background:var(--vd-green);color:#053d20}
/* reviews (Reviews Pro / productcomments) */
#product-comments-list .comment,.product-comments .comment,.comment{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:12px;color:var(--vd-text)}
.star-content .star,.grade-stars i,.comments-note .star,.star.on::before{color:var(--vd-gold)}
.comment-author,.comment .name{color:#fff}

/* ============ FIX: review link + empty stars ============ */
.product-comments a,.comments-note a,.post-product-comment,.reviews-link,.product__reviews a,#product-comments-list a,.comment a{color:var(--vd-gold-hi)}
.star-content .star:not(.on)::before,.grade-stars .star-off,.comments-note .star:not(.on){color:var(--vd-muted2)}

/* ============ CART ============ */
.cart-grid__products-details,.cart__item,.cart-item,.cart-grid__content>.card,.cart-detailed{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px}
.cart__item{margin-bottom:12px;padding:16px}
.cart-summary,.cart-grid__aside .card,.cart-grid__aside-wrapper>.card{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px}
.cart-grid__aside-wrapper{position:static}
@media(min-width:992px){.cart-grid__aside-wrapper{position:sticky;top:84px}}
.cart-summary__line,.cart-summary__label{color:var(--vd-muted)}
.cart-summary__value{color:var(--vd-text)}
.cart-summary__line--bold .cart-summary__value,.cart-summary__total .cart-summary__value,.cart-total .value{color:var(--vd-gold-hi)!important;font-family:var(--vd-head);font-size:26px}
.cart-summary__subtotals{border-bottom:1px solid var(--vd-line);padding-bottom:8px;margin-bottom:8px}
.product-line__title a,.cart-item a,.product-line-info a{color:var(--vd-text)}
.product-line__title a:hover{color:var(--vd-gold-hi)}
.cart-item .price,.product-line .price,.product-price strong{color:var(--vd-gold-hi);font-family:var(--vd-head)}
.cart__continue-shopping{color:var(--vd-gold-hi)}
.cart-voucher .form-control{background:var(--vd-bg2)}

/* ============ CHECKOUT / ORDER (OPC) ============ */
.checkout-steps__step,.js-step-item,.checkout-step{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px;margin-bottom:14px;overflow:hidden}
.checkout-steps__step-title,.step-title,.checkout-step .step-title{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;color:#fff}
.checkout-steps__number{background:var(--vd-surface2);border:1px solid var(--vd-line);color:var(--vd-muted)}
.checkout-steps__step.-current .checkout-steps__number,.-current .checkout-steps__number,.js-current-step .checkout-steps__number{background:var(--vd-gold);color:#1a1205;border-color:var(--vd-gold)}
.checkout-steps__step.-complete .checkout-steps__number,.-complete .checkout-steps__number,.-reachable.-complete .checkout-steps__number{color:var(--vd-green);border-color:var(--vd-green)}
.cart-summary-product__price,.cart-summary-product__total,.cart-summary-product__prices{color:var(--vd-gold-hi);font-family:var(--vd-head)}
.cart-summary-product__link,.cart-summary-product__content-left a{color:var(--vd-text)}
.cart-summary-product__quantity{color:var(--vd-muted2)}
.cart-summary__products-number,.cart-summary__label{color:var(--vd-muted)}
/* delivery + payment options */
.delivery-option,.delivery-options-list .delivery-option,.js-delivery-option{background:var(--vd-bg2);border:1px solid var(--vd-line);border-radius:12px;padding:12px}
.payment-option,.js-payment-option,.payment-options .payment-option{background:var(--vd-bg2);border:1px solid var(--vd-line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.payment-option:hover,.payment-option.selected{border-color:var(--vd-line2)}
.additional-information,.payment-option-form{color:var(--vd-muted)}
.address-item,.js-address-item{background:var(--vd-bg2);border:1px solid var(--vd-line);border-radius:12px}
.address-item.selected,.address-item:hover{border-color:var(--vd-line2)}

/* ============ LOGO + GET A QUOTE ============ */
.vd-logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--vd-head);font-weight:700;font-size:22px;letter-spacing:.5px;color:#fff;text-decoration:none;line-height:1}
.vd-logo:hover{color:#fff}
.vd-logo__mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--vd-gold),var(--vd-gold-deep));display:grid;place-items:center;color:#1a1205;box-shadow:0 8px 20px -8px rgba(242,173,15,.7);flex:0 0 auto}
.vd-logo__mark svg{width:22px;height:22px}
.vd-logo__text{color:#fff} .vd-logo__text span{color:var(--vd-gold)}
.header-bottom__h1{margin:0;line-height:1}
.vd-quote-btn{padding:10px 18px!important;font-size:14px;white-space:nowrap}

/* ============ PRODUCT mockup elements ============ */
.vd-eyebrow{font-family:var(--vd-head);text-transform:uppercase;letter-spacing:3px;font-size:12px;color:var(--vd-gold);font-weight:600;margin-bottom:8px}
.vd-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.vd-fact{border:1px solid var(--vd-line);background:var(--vd-surface);border-radius:12px;padding:11px 13px}
.vd-fact .k{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--vd-muted2);font-family:var(--vd-head)}
.vd-fact .v{font-size:14px;color:#fff;font-weight:600;margin-top:3px}
.vd-esn{margin:16px 0;border:1px dashed var(--vd-line2);background:rgba(242,173,15,.06);border-radius:12px;padding:13px 15px;display:flex;gap:11px}
.vd-esn svg{width:22px;height:22px;color:var(--vd-gold);flex:0 0 auto;margin-top:2px}
.vd-esn b{color:#fff}.vd-esn p{margin:0;font-size:13px;color:var(--vd-muted)}
.vd-trust{margin-top:20px;padding-top:18px;border-top:1px solid var(--vd-line);overflow:hidden}
.vd-trust__track{display:flex;flex-wrap:wrap;gap:14px 20px}
.vd-trust__set{display:contents}
.vd-trust__dup{display:none}
.vd-trust span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--vd-muted)}
.vd-trust svg{width:19px;height:19px;color:var(--vd-gold);flex:0 0 auto}
/* Mobile: hàng trust tự chạy ngang (phải→trái), nhân đôi cho liền mạch, chạm để dừng */
@media(max-width:991px){
  .vd-trust__track{flex-wrap:nowrap;width:max-content;gap:0;animation:vd-trustscroll 24s linear infinite}
  .vd-trust__set{display:flex;flex-wrap:nowrap;gap:0}
  .vd-trust__dup{display:flex}
  .vd-trust span{white-space:nowrap;padding:0 16px}
  .vd-trust:hover .vd-trust__track,.vd-trust:active .vd-trust__track{animation-play-state:paused}
}
@keyframes vd-trustscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.vd-steps-mini{display:grid;gap:16px}
.vd-stepm{display:flex;gap:14px;align-items:flex-start}
.vd-stepm .n{font-family:var(--vd-head);font-weight:700;font-size:30px;color:rgba(242,173,15,.25);line-height:.9;flex:0 0 auto;width:40px}
.vd-stepm b{color:#fff;font-family:var(--vd-head);text-transform:uppercase;font-size:15px;letter-spacing:.3px}
.vd-stepm p{color:var(--vd-muted);font-size:13.5px;margin:3px 0 0}

/* ============ PRODUCT TABS NGANG (mockup) ============ */
.vd-tabs{background:var(--vd-surface);border:1px solid var(--vd-line);border-radius:16px;overflow:hidden}
.vd-tabnav{display:flex;gap:2px;border-bottom:1px solid var(--vd-line);overflow-x:auto;scrollbar-width:none;padding:0 8px}
.vd-tabnav::-webkit-scrollbar{display:none}
.vd-tab{flex:0 0 auto;background:none;border:none;border-bottom:2px solid transparent;color:var(--vd-muted);font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.8px;font-size:14px;padding:17px 20px;cursor:pointer;white-space:nowrap;transition:.15s}
.vd-tab:hover{color:#fff}
.vd-tab.on{color:var(--vd-gold);border-bottom-color:var(--vd-gold)}
.vd-panes{padding:26px 24px}
.vd-pane{display:none}
.vd-pane.on{display:block}
.vd-pane,.vd-pane .rich-text,.vd-pane p{color:var(--vd-muted)}
.vd-pane .rich-text strong,.vd-pane b{color:#fff}
.vd-spec-table{width:100%;border-collapse:collapse;max-width:760px}
.vd-spec-table tr{border-bottom:1px solid var(--vd-line)}
.vd-spec-table td{padding:12px 4px;font-size:14.5px}
.vd-spec-table td:first-child{color:var(--vd-muted2);width:42%;font-family:var(--vd-head);text-transform:uppercase;letter-spacing:.5px;font-size:12.5px}
.vd-spec-table td:last-child{color:var(--vd-text);font-weight:500}

/* ============ PRODUCT layout khớp mockup: tab full-width + gallery sticky + ảnh khung tối ============ */
.vd-product{align-items:flex-start}
.vd-product .product__left{align-self:flex-start}
/* Sticky gallery CHỈ ở desktop (>=992px = 2 cột). Ở mobile 1 cột, sticky sẽ ghim ảnh và ĐÈ lên khối giá/mua → tắt. */
@media(min-width:992px){.vd-product .product__left{position:sticky;top:90px}}
/* tab + reassurance thành full-width (kéo lên, không co nửa trái) */
.product__bottom{display:block !important}
.product__bottom-left,.product__bottom-right{width:100% !important;max-width:none !important;flex:none !important}
.product__bottom-right{margin-top:18px}
.product__bottom-right .blockreassurance,.product__bottom-right .block-reassurance{display:flex;flex-wrap:wrap;gap:16px}
.product__bottom-right .blockreassurance>*{flex:1 1 220px}
/* ô ảnh sản phẩm = khung tối bo góc như mockup */
.vd-product .product-cover,.vd-product .js-qv-product-cover,.vd-product .product__cover{border:1px solid var(--vd-line) !important;border-radius:16px !important;background:linear-gradient(160deg,#16262c,#0b1518) !important;overflow:hidden}
.vd-product .product__images{border-radius:16px}
.vd-product .product__thumbnails{margin-top:12px}

/* ============ PRODUCT gallery box tối + thu gọn cột phải ============ */
.vd-product .product__images,.vd-product .product__images.js-images-container{background:linear-gradient(160deg,#16262c,#0b1518) !important;border:1px solid var(--vd-line) !important;border-radius:16px !important;overflow:hidden}
.vd-product .product__images .js-qv-product-cover,.vd-product .product__images img{border-radius:14px}
.vd-product .product__thumbnails-item img{border:1px solid var(--vd-line);border-radius:10px;background:linear-gradient(160deg,#1a2c32,#0e1a1e)}
.vd-product .vd-facts{margin:14px 0}
.vd-product .vd-esn{margin:12px 0}
.vd-product .vd-trust{margin-top:16px;padding-top:14px}
.vd-product .product__bottom{margin-top:6px}

/* ============ PRODUCT dyno banner trong cột ảnh (như mockup) ============ */
@keyframes vdpulse{50%{opacity:.25}}
.vd-pdyno{margin-top:14px;border:1px solid var(--vd-line);border-radius:16px;background:linear-gradient(160deg,#16262c,#0b1518);padding:14px 16px;cursor:pointer}
.vd-pdyno__head{display:flex;justify-content:space-between;align-items:center;font-family:var(--vd-head);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--vd-muted)}
.vd-pdyno__head .live{color:var(--vd-green);display:inline-flex;align-items:center;gap:6px}
.vd-pdyno__head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vd-green);box-shadow:0 0 8px var(--vd-green);animation:vdpulse 1.6s infinite}
.vd-pdyno__chart{width:100%;height:180px;margin-top:6px;display:block}
.vd-pdyno .curve{stroke-linecap:round;stroke-linejoin:round}
.vd-pdyno__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px}
.vd-pdyno__foot .peak{font-family:var(--vd-head);font-size:11px;color:var(--vd-muted);text-transform:uppercase;letter-spacing:.5px}
.vd-pdyno__foot .peak b{color:var(--vd-gold-hi);font-size:16px;letter-spacing:0}
.vd-pdyno__foot .lg{display:flex;gap:12px;font-size:11px;color:var(--vd-muted2)}
.vd-pdyno__foot .lg span{display:inline-flex;align-items:center;gap:5px}.vd-pdyno__foot .lg i{width:14px;height:3px;border-radius:2px}
.vd-pdyno__note{font-size:10.5px;color:var(--vd-muted2);text-align:center;margin-top:6px;opacity:.8}

/* ============ Dyno = 1 slide trong carousel ảnh (không phải cover) ============ */
.vd-product .vd-dyno-slide .vd-pdyno{margin:0}
.vd-dyno-thumb{background:linear-gradient(160deg,#16262c,#0b1518) !important;border:1px solid var(--vd-line) !important;border-radius:10px;width:100%;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;padding:0}
.vd-dyno-thumb.active,.vd-dyno-thumb:hover{border-color:var(--vd-gold) !important}
.vd-dyno-thumb__mini{display:flex;flex-direction:column;align-items:center;gap:3px}
.vd-dyno-thumb__mini svg{width:36px;height:24px}
.vd-dyno-thumb__mini b{font-family:var(--vd-head);font-size:9px;letter-spacing:1.5px;color:var(--vd-gold)}

/* ============ Dyno slide = chiếm NGUYÊN khung ảnh (bằng ảnh SP) + icon ============ */
.vd-product .vd-dyno-slide{aspect-ratio:1/1}
.vd-product .vd-dyno-slide .vd-pdyno{height:100%;margin:0;display:flex;flex-direction:column;border-radius:16px}
.vd-product .vd-dyno-slide .vd-pdyno__chart{flex:1 1 auto;height:auto;min-height:0}
.vd-pdyno__ico{width:15px;height:15px;vertical-align:-3px;margin-right:5px;color:var(--vd-gold)}
