/*
  woocommerce.css — re-skins WooCommerce's DEFAULT markup/classes.
  We never override Woo template files (see inc/woocommerce.php for why);
  everything here targets the classes WooCommerce core itself outputs.
*/

/* ── Content wrapper (WooCommerce's own #primary/#main — no injected divs) ── */
.woocommerce-page #primary.content-area,
.single-product #primary.content-area {
  max-width: var(--container);
  margin: 0 auto;
  /* padding-bottom was 0 → shop/product content sat flush against the footer.
     Give it breathing room so the last product row isn't glued to the footer. */
  padding: 48px 24px 80px;
}

/* ── Breadcrumb (WooCommerce's own default output) ── */
.woocommerce-breadcrumb {
  display: block; margin: 0 0 24px; padding: 0; font-size: 13px; color: var(--muted);
}
.woocommerce-breadcrumb a { color: var(--muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--green); }

/* ── Notices (added to cart, errors, coupon messages) ── */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  background: var(--soft); border: 1px solid var(--border); border-left: 4px solid var(--green);
  border-radius: var(--radius-sm); padding: 14px 20px; margin-bottom: 24px; list-style: none; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--danger); }
.woocommerce-message .button, .woocommerce-error .button { order: 2; }
.woocommerce-message a.button, .woocommerce-info a.button { background: var(--green); color: var(--white); padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 700; }

/* ── Shop loop (archive-product, related products, cross-sells) ── */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
/* BUGFIX (empty first cell / ô trống đầu tiên): WooCommerce's bundled
   woocommerce-layout.css adds `ul.products::before, ul.products::after
   { content:" "; display:table }` as a float clearfix. Inside a CSS grid
   container those two pseudo-elements become real GRID ITEMS and each eats a
   cell — the ::before lands in the top-left, producing the blank box. Grid does
   its own layout and needs no clearfix, so we simply stop them being generated. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--dur-mid) var(--ease); position: relative;
  padding: 0 !important; margin: 0 !important; text-align: left; float: none !important;
  /* BUGFIX ("narrow cards / huge gaps" on /shop/): WooCommerce's own bundled
     stylesheet is still loaded alongside this one and puts a float-grid width
     like `width: 30.75%` on this exact selector for a 3-column loop. Grid items
     ignore `float`, but NOT an explicit `width` — nothing here overrode it, so
     every card rendered at ~30% of its OWN grid column instead of filling it. */
  width: 100% !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); border-color: rgba(46,125,50,.3); box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block; position: relative; text-decoration: none; color: inherit;
}
.woocommerce ul.products li.product img {
  /* object-fit:contain (not cover) + object-position:center: the photo is
     never cropped or zoomed in to fill the 4:3 frame — whatever the client
     uploads is shown whole and centered, with the frame's own background
     filling any leftover space. Avoids "off-center"/cropped product photos
     without requiring the client to pre-crop every image to an exact size. */
  width: 100%; aspect-ratio: 4/3; object-fit: contain; object-position: center; background: var(--charcoal);
  margin: 0 !important; border-radius: 0 !important; display: block; padding: 16px; box-sizing: border-box;
}
/* WooCommerce prints its native "show categories" tiles (Sản phẩm > Danh mục >
   Thumbnail) as li.product-category, which normally also carries the .product
   class so the rule above already reaches it — this is just a defensive
   duplicate in case that class is ever missing. IMPORTANT: this can only show
   the WHOLE of whatever photo was uploaded — if a specific category's photo
   still looks "cropped" after this, the uploaded photo itself is already a
   tight/zoomed shot (e.g. only the middle of the tool, no visible ends); no
   CSS can recover framing that isn't in the source file, it needs a fuller
   re-crop/re-upload for that one category's Thumbnail. */
.woocommerce ul.products li.product-category img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; object-position: center; background: var(--charcoal);
  margin: 0 !important; border-radius: 0 !important; display: block; padding: 16px; box-sizing: border-box;
}
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--white);
  min-height: auto; min-width: auto; line-height: 1; padding: 5px 10px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; z-index: 2;
}
.woocommerce ul.products li.product .badge { position: absolute; top: 12px; right: 12px; left: auto; z-index: 2; }
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink); padding: 20px 20px 4px; margin: 0;
}
.woocommerce ul.products li.product .price {
  display: block; padding: 4px 20px 0; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--green);
}
.woocommerce ul.products li.product .price del { font-size: 14px; color: var(--muted); font-weight: 400; opacity: 1; margin-right: 8px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: 6px 20px 0; color: var(--green); }
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: block; margin: 16px 20px 12px; background: var(--charcoal); color: var(--white);
  border-radius: 6px; padding: 11px; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover { background: var(--green); }
/* "View cart" link WooCommerce injects after AJAX add-to-cart — styled to a neat
   outlined button so it doesn't break the card layout. */
.woocommerce ul.products li.product .added_to_cart {
  display: block; margin: -4px 20px 12px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--green); text-decoration: none; padding: 9px; border: 1px solid var(--green); border-radius: 6px;
  transition: all var(--dur-fast) var(--ease);
}
.woocommerce ul.products li.product .added_to_cart:hover { background: var(--green); color: var(--white); }
.woocommerce ul.products li.product .compare-check { margin: 0 20px 16px; }

/* ── Result count / ordering bar ── */
.woocommerce-result-count, .woocommerce-ordering { color: var(--muted); font-size: 14px; }
.woocommerce-ordering select { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--white); }
.woocommerce-products-header__title.page-title {
  font-family: var(--font-head); font-size: clamp(28px,3.6vw,42px); font-weight: 800;
  text-transform: uppercase; margin-bottom: 24px; letter-spacing: -.5px;
}

/* ── Single product ── */
.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--radius-lg); overflow: hidden; background: var(--charcoal); max-width: 100%; }
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; max-width: 100%; height: auto; }
/* BUGFIX (chi tiết sản phẩm mobile bị tràn ngang, chữ tiêu đề bị cắt mất
   đầu dòng): theme trước giờ không ép max-width cho khối ảnh/tóm tắt sản
   phẩm — nếu gallery JS tính sai bề rộng lúc mới tải (hay gặp khi có
   plugin trì hoãn load JS như Autoptimize), khối ảnh có thể rộng hơn màn
   hình, mà body đang overflow-x:hidden nên phần dư bị cắt mất luôn thay vì
   cho cuộn ngang thấy. Ép max-width:100% chắc chắn cho cả ảnh lẫn 2 cột. */
.woocommerce div.product div.images, .woocommerce div.product div.summary { max-width: 100%; }
@media (max-width: 768px) {
  .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; }
}
.woocommerce div.product .product_title { font-family: var(--font-head); font-size: clamp(28px,3.4vw,40px); font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--green); }
.woocommerce div.product p.price del { font-size: 18px; color: var(--muted); margin-right: 10px; }
.woocommerce div.product .stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green); }
.woocommerce div.product .stock.out-of-stock { color: var(--danger); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 16px 0 24px; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.woocommerce div.product form.cart .quantity input.qty { width: 60px; height: 44px; border: none; text-align: center; font-weight: 600; }
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--accent); color: var(--white); border: none; padding: 14px 28px; border-radius: 6px;
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--accent-light); }

/* ── Trust / USP row under add-to-cart (single product) ── */
.vt-product-usp { list-style: none; margin: 8px 0 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--soft); display: flex; flex-direction: column; gap: 14px; }
.vt-product-usp li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.vt-product-usp svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); }
.vt-product-usp a { color: var(--green); font-weight: 700; text-decoration: none; }
.vt-product-usp a:hover { text-decoration: underline; }

/* ── "Yêu cầu báo giá" button under add-to-cart ── */
.vt-quote-btn { margin-bottom: 20px; }

/* ── Product video (top of description tab) ── */
.vt-product-video { margin-bottom: 24px; }
.vt-product-video iframe, .vt-product-video video { width: 100%; aspect-ratio: 16/9; height: auto; border: none; border-radius: var(--radius-md); background: var(--charcoal); display: block; }

/* ── FAQ accordion (single product) ── */
.vt-faq-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; max-width: 860px; }
.vt-faq-item { border-bottom: 1px solid var(--border); }
.vt-faq-item:last-child { border-bottom: none; }
.vt-faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background var(--dur-fast) var(--ease); }
.vt-faq-item summary::-webkit-details-marker { display: none; }
.vt-faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--green); flex-shrink: 0; line-height: 1; }
.vt-faq-item[open] summary::after { content: '−'; }
.vt-faq-item summary:hover { background: var(--soft); }
.vt-faq-answer { padding: 0 20px 20px; color: var(--muted); line-height: 1.7; font-size: 15px; }
.vt-faq-answer p { margin: 0; }

/* ── Mobile sticky add-to-cart / quote bar ── */
.vt-sticky-atc { display: none; }
@media (max-width: 768px) {
  .vt-sticky-atc {
    display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    /* BUGFIX (mục 66 — thanh vẫn rộng hơn màn hình dù đã set left/right):
       chẩn đoán mục 64 sai — #vt-sticky-atc chèn qua wp_footer nên không
       nằm trong <main class="page-fade-in">, sửa transform ở đó không có
       tác dụng gì với phần tử này. Ép cứng width:100% + box-sizing +
       margin:0 thay vì chỉ dựa vào left/right, chắc chắn đúng khổ màn hình
       bất kể containing block nào đang bị lệch. */
    width: 100%; max-width: 100vw; margin: 0; box-sizing: border-box;
    background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(10,20,10,.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%); transition: transform var(--dur-mid) var(--ease);
  }
  .vt-sticky-atc.visible { transform: translateY(0); }
  .vt-sticky-atc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .vt-sticky-atc-name { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-sticky-atc-price { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--green); }
  .vt-sticky-atc-price del { font-size: 13px; color: var(--muted); font-weight: 400; margin-right: 6px; }
  .vt-sticky-atc-btn { flex-shrink: 0; white-space: nowrap; }
}

/* Legacy "viewport image" banner (see inc/woocommerce.php vt_the_viewport_banner) */
.vt-viewport-banner { margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden; }
.vt-viewport-banner img { width: 100%; display: none; }
.vt-viewport-banner .vt-viewport-desktop { display: block; }
@media (max-width: 640px) {
  .vt-viewport-banner .vt-viewport-desktop { display: none; }
  .vt-viewport-banner .vt-viewport-mobile { display: block; }
}

/* ── Product tabs (description / additional info / reviews) ── */
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin: 48px 0 0; padding: 0; list-style: none; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 20px; color: var(--muted); font-family: var(--font-head); font-size: 15px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--green); border-bottom-color: var(--green); }
.woocommerce-tabs .panel { padding: 28px 0; color: var(--muted); line-height: 1.8; }
.woocommerce-tabs .panel img { border-radius: var(--radius-md); margin: 16px 0; }
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.woocommerce-tabs table.shop_attributes th { text-align: left; padding: 14px 18px; background: var(--soft); font-weight: 700; width: 260px; color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--border); }
.woocommerce-tabs table.shop_attributes td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 14px; }
.woocommerce-tabs table.shop_attributes tr:last-child th, .woocommerce-tabs table.shop_attributes tr:last-child td { border-bottom: none; }
.woocommerce-tabs table.shop_attributes tr:nth-child(even) th { background: var(--white); }
.woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* BUGFIX (bảng kẻ ô mất viền ngoài trình soạn thảo): the dashed grid a table
   shows while typing in the WordPress editor is an editor-only placeholder —
   it is not an actual border, so a <table> typed straight into "Mô tả sản
   phẩm" (or any other WYSIWYG content area) publishes with no visible border
   at all unless we style plain tables here. Excludes table.shop_attributes,
   which already has its own styling above. */
.woocommerce-Tabs-panel table:not(.shop_attributes),
.vt-prose table:not(.shop_table),
.news-single-content table {
  width: 100%; border-collapse: collapse; margin: 8px 0 24px;
}
.woocommerce-Tabs-panel table:not(.shop_attributes) th,
.woocommerce-Tabs-panel table:not(.shop_attributes) td,
.vt-prose table:not(.shop_table) th, .vt-prose table:not(.shop_table) td,
.news-single-content table th, .news-single-content table td {
  border: 1px solid var(--border); padding: 10px 14px; text-align: left; font-size: 14px; color: var(--ink);
}
.woocommerce-Tabs-panel table:not(.shop_attributes) th,
.vt-prose table:not(.shop_table) th,
.news-single-content table th {
  background: var(--soft); font-weight: 700;
}
/* Phòng hờ (mục 58): nếu 1 bảng shop_table (giỏ hàng/đơn hàng WooCommerce)
   lỡ lọt vào trong .vt-prose ở đâu đó, không cho style bảng chung ở trên đè
   lên — để nguyên style riêng của WooCommerce (.cart_totals, #order_review...). */

/* BUGFIX (mục 65 — bảng thông số nhiều cột tràn ngang trên mobile, bị cắt
   chữ 2 bên): bảng tự gõ tay trong mô tả sản phẩm (vd so sánh nhiều model
   trong 1 bảng) thường rộng hơn hẳn màn hình điện thoại — mà body đang
   overflow-x:hidden (chặn tràn trang) nên phần dư của bảng bị cắt mất luôn
   thay vì cho xem hết. Cho bảng tự cuộn ngang TRONG KHUNG CỦA NÓ trên
   mobile, không kéo cả trang tràn theo. */
@media (max-width: 768px) {
  .woocommerce-Tabs-panel table:not(.shop_attributes):not(.shop_table),
  .vt-prose table:not(.shop_table),
  .news-single-content table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
}

/* ── Related / best-seller / upsell sections on the single product page ── */
.vt-product-section, .related.products, .upsells.products { margin-top: 64px; }
.vt-product-section > h2, .related.products > h2, .upsells.products > h2 {
  font-family: var(--font-head); font-size: clamp(24px,2.6vw,34px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.3px; margin-bottom: 28px; position: relative; padding-bottom: 14px;
}
.vt-product-section > h2::after, .related.products > h2::after, .upsells.products > h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--green);
}
/* These sections span the full content width (no shop sidebar), so 4 columns reads better than the shop's 3. */
.vt-product-section ul.products, .related.products ul.products, .upsells.products ul.products {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .vt-product-section ul.products, .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vt-product-section ul.products, .related.products ul.products, .upsells.products ul.products { grid-template-columns: 1fr; }
}

/* ── Cart & Checkout tables ── */
table.shop_table {
  width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px;
}
table.shop_table th { background: var(--charcoal); color: var(--white); padding: 14px 16px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
table.shop_table td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.shop_table td.product-thumbnail img { width: 72px; border-radius: 8px; }
table.shop_table td.product-name a { font-weight: 600; color: var(--ink); text-decoration: none; }
table.shop_table td.product-name a:hover { color: var(--green); }
table.shop_table .quantity input.qty { width: 60px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; text-align: center; }
table.shop_table td.product-remove a { color: var(--muted); font-size: 18px; }
table.shop_table td.product-remove a:hover { color: var(--danger); }

/* Theo yêu cầu client: bỏ hết CSS riêng cho trang Giỏ hàng (bảng, khung tổng
   cộng, nút Tiến hành thanh toán, ô mã giảm giá...) — dùng nguyên mặc định
   của WooCommerce, theme không can thiệp gì vào trang này nữa. */

/* ── Checkout ── */
/* Theo yêu cầu client: bỏ hết CSS riêng cho trang Thanh toán (grid 2 cột,
   màu nền, style input/nút...) — dùng nguyên bố cục + màu mặc định của
   WooCommerce, theme không can thiệp gì vào trang này nữa. */

/* ── My Account ── */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 16px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--green-tint); color: var(--green); font-weight: 700; }
.woocommerce-MyAccount-content { padding-top: 8px; }

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}