/* ==========================================================================
   Trang shop: danh mục có bộ lọc + trang sản phẩm.
   Chỉ nạp trên trang WooCommerce.
   ========================================================================== */

/* --- Bố cục danh mục ------------------------------------------------------ */
.shop-layout { display: grid; gap: var(--s-5); }
@media (min-width: 992px) { .shop-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-6); } }

.shop-filters {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-4);
  align-self: start;
}
@media (min-width: 992px) { .shop-filters { position: sticky; top: var(--s-4); } }

.filter__heading {
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-maroon-700);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-gold-300);
}
.filter__group { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.filter__group:last-of-type { margin-bottom: var(--s-3); }
.filter__legend {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--c-ink); padding: 0; margin-bottom: var(--s-2);
}
.filter__option {
  display: flex; align-items: center; gap: var(--s-2);
  padding: .35em 0; cursor: pointer;
  font-size: var(--t-sm); color: var(--c-body);
}
.filter__option:hover { color: var(--c-accent); }
.filter__option input { accent-color: var(--c-maroon-700); width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.filter__option span { flex: 1; }
.filter__option em { font-style: normal; font-size: var(--t-xs); color: var(--c-muted); }

.shop-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.shop-count { font-size: var(--t-sm); color: var(--c-muted); margin: 0; }
.woocommerce-ordering select {
  padding: .45em 2em .45em .8em;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-surface); font-size: var(--t-sm); color: var(--c-body);
}

/* --- Trang sản phẩm ------------------------------------------------------- */
.product-page { padding-block: var(--s-4) var(--s-8); }
.product-top { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .product-top { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--s-7); align-items: start; } }
@media (min-width: 900px) { .product-gallery { position: sticky; top: var(--s-4); } }

.product-gallery__main {
  position: relative; margin: 0; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1);
}
.product-gallery__main img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; cursor: zoom-in; }
.product-gallery__main figcaption {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding: var(--s-2); font-size: var(--t-xs); color: var(--c-muted); border-top: 1px solid var(--c-line); background: var(--c-surface-2);
}
.badge--hot { background: var(--c-gold-500); color: var(--c-maroon-900); }
.product-gallery__thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; }
.product-gallery__thumb {
  flex: 0 0 76px; width: 76px; height: 76px; padding: 0;
  border: 2px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb:hover { border-color: var(--c-gold-500); transform: translateY(-1px); }
.product-gallery__thumb.is-active { border-color: var(--c-maroon-700); }

.product-cats { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.product-cats a { color: var(--c-bronze); }
.product-title { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem); line-height: 1.25; margin-bottom: var(--s-3); }

.product-meta { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.product-meta li {
  margin: 0; display: inline-flex; align-items: baseline; gap: .4em;
  padding: .3em .75em; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; font-size: var(--t-xs);
}
.product-meta span { color: var(--c-muted); }
.product-meta strong { color: var(--c-ink); font-weight: 600; }

.product-price {
  padding: var(--s-4); margin-bottom: var(--s-4);
  background: linear-gradient(135deg, #fff8ea, #fdf1d6); border: 1px solid #f0dfb0; border-radius: var(--radius);
  font-size: var(--t-lg); font-weight: 700; color: var(--c-red);
}
.product-price--ask strong { display: block; font-size: var(--t-md); color: var(--c-maroon-700); }
.product-price--ask span { display: block; margin-top: .35em; font-size: var(--t-sm); font-weight: 400; color: var(--c-body); line-height: 1.5; }
.product-price .woocommerce-Price-amount { font-size: inherit; }
.product-price del { color: var(--c-muted); font-weight: 400; font-size: .75em; margin-right: .4em; }

.product-short { margin-bottom: var(--s-4); font-size: var(--t-sm); color: var(--c-body); }

.product-perks { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: .5em; }
.product-perks li { margin: 0; display: flex; gap: .5em; align-items: flex-start; font-size: var(--t-sm); color: var(--c-body); line-height: 1.45; }
.product-perks svg { color: #2e7d32; flex-shrink: 0; margin-top: 2px; }

.product-actions { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
@media (min-width: 560px) { .product-actions { grid-template-columns: 1fr 1fr; } .product-actions .cart, .product-actions__call { grid-column: 1 / -1; } }
.product-actions .btn { width: 100%; }
.product-actions__call { justify-content: flex-start; gap: var(--s-3); text-align: left; padding: .7em 1.4em; font-size: var(--t-md); }
.product-actions__call small { display: block; font-size: var(--t-xs); font-weight: 400; opacity: .85; letter-spacing: .06em; text-transform: uppercase; }
.product-actions .cart { display: flex; gap: var(--s-2); }
.product-actions .cart .quantity input { width: 80px; height: 100%; padding: .7em; text-align: center; border: 1px solid var(--c-line); border-radius: 999px; }
.product-actions .single_add_to_cart_button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: .85em 2em; border: 0; border-radius: 999px;
  background: var(--c-maroon-700); color: #fff; font-weight: 600; font-size: var(--t-base); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.product-actions .single_add_to_cart_button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

.product-enquiry {
  background: var(--c-surface); border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold-500);
  border-radius: var(--radius); padding: var(--s-4); scroll-margin-top: var(--s-5);
}
.product-enquiry__lead { display: flex; align-items: center; gap: .5em; font-size: var(--t-sm); font-weight: 700; color: var(--c-maroon-700); margin-bottom: var(--s-3); }
.enquiry-form { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .enquiry-form { grid-template-columns: 1fr 1fr; } }
.enquiry-form input, .enquiry-form textarea { width: 100%; padding: .7em .9em; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; font-size: var(--t-sm); }
.enquiry-form input:focus, .enquiry-form textarea:focus { border-color: var(--c-gold-500); outline: none; box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.enquiry-form textarea { grid-column: 1 / -1; min-height: 76px; resize: vertical; }
.enquiry-form .btn { grid-column: 1 / -1; }
.enquiry-form__note { grid-column: 1/-1; font-size: var(--t-xs); color: var(--c-muted); margin: 0; }
.enquiry-ok { padding: var(--s-3); margin-bottom: var(--s-3); background: #e8f5e9; border-left: 3px solid #2e7d32; border-radius: var(--radius-sm); font-size: var(--t-sm); color: #1b5e20; }

/* Cam kết: dải 4 ô ngang toàn chiều rộng */
.product-trust { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .product-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-trust { grid-template-columns: repeat(4, 1fr); } }
.product-trust li {
  margin: 0; display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.product-trust svg { color: var(--c-maroon-700); flex-shrink: 0; width: 40px; height: 40px; padding: 9px; background: var(--c-gold-300); border-radius: 50%; }
.product-trust strong { display: block; font-size: var(--t-sm); color: var(--c-ink); margin-bottom: .2em; }
.product-trust span { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.5; }

/* Tabs */
.product-tabs { margin-top: var(--s-7); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
.product-tabs__list { display: flex; overflow-x: auto; background: var(--c-surface-3); border-bottom: 1px solid var(--c-line); }
.product-tabs__list button {
  flex-shrink: 0; padding: 1em 1.5em; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-muted); transition: all .18s var(--ease);
}
.product-tabs__list button:hover { color: var(--c-accent); }
.product-tabs__list button[aria-selected="true"] { color: var(--c-maroon-700); border-bottom-color: var(--c-maroon-700); background: var(--c-surface); }
.product-tabs__panel { max-width: none; padding: var(--s-5); }
@media (min-width: 900px) { .product-tabs__panel { padding: var(--s-6) var(--s-7); } .product-tabs__panel > * { max-width: 80ch; } }
.product-tabs__panel > h2:first-child { display: none; } /* Woo in lại tên tab */
.product-tabs__panel table.shop_attributes th { width: 30%; }

/* Sản phẩm liên quan */
.related.products, .up-sells { margin-top: var(--s-8); }
.related.products > h2, .up-sells > h2 { font-size: var(--t-xl); text-align: center; margin-bottom: var(--s-5); }
.related.products ul.products, .up-sells ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .related.products ul.products { grid-template-columns: repeat(4, 1fr); } }
.related.products li, .up-sells li { margin: 0; }

/* Thông báo của WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm); font-size: var(--t-sm);
  border-left: 3px solid var(--c-gold-500); background: var(--c-surface-3);
}
.woocommerce-error { border-left-color: var(--c-red); }

/* Xem ảnh to */
.img-viewer {
  border: 0; padding: 0; background: transparent;
  max-width: 94vw; max-height: 94vh;
}
.img-viewer::backdrop { background: rgba(26,22,20,.88); }
.img-viewer img { max-width: 94vw; max-height: 90vh; width: auto; border-radius: var(--radius); }
.img-viewer button {
  position: absolute; top: -8px; right: -8px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #fff; color: var(--c-ink);
  font-size: 22px; line-height: 1; box-shadow: var(--shadow-2);
}

.enquiry-ok {
  padding: var(--s-3); margin-bottom: var(--s-3);
  background: #e8f5e9; border-left: 3px solid #2e7d32; border-radius: var(--radius-sm);
  font-size: var(--t-sm); color: #1b5e20;
}

/* Bộ lọc thu gọn trên mobile */
.filter__summary {
  display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-maroon-700); list-style: none;
}
.filter__summary::-webkit-details-marker { display: none; }
.shop-filters[open] .filter__summary { margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-gold-300); }
.shop-filters[open] .filter__heading { display: none; }
@media (min-width: 992px) { .filter__summary { pointer-events: none; } }
.cat-desc { border-top: 1px solid var(--c-line); margin-top: var(--s-6); }
.cat-desc .prose img { margin-inline: auto; }

/* --- Bình luận & đánh giá sản phẩm ---------------------------------------- */
/* --- Bình luận & đánh giá ------------------------------------------------ */
.reviews { max-width: 1040px; }
.reviews ol, .reviews ul { list-style: none; margin: 0; padding: 0; }
.reviews__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-6); align-items: center; padding: var(--s-5); margin-bottom: var(--s-6); background: linear-gradient(135deg, #fff9ee, #fffdf8); border: 1px solid var(--c-gold-200, #eadbb8); border-radius: var(--radius-lg); }
.reviews__score { display: grid; justify-items: center; gap: .3em; min-width: 132px; padding-right: var(--s-5); border-right: 1px solid var(--c-gold-200, #eadbb8); }
.reviews__score strong { font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem); line-height: 1; color: var(--c-maroon-700); font-weight: 800; letter-spacing: -.02em; }
.reviews__score .star-rating { font-size: 1.05rem; }
.reviews__score span { font-size: var(--t-xs); color: var(--c-muted); }
.reviews__bars li { display: grid; grid-template-columns: 3em minmax(0, 1fr) 2em; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--c-muted); line-height: 1.9; }
.reviews__bars span { font-weight: 600; color: var(--c-body); white-space: nowrap; }
.reviews__bars i { display: block; height: 8px; border-radius: 999px; background: #efe6d3; overflow: hidden; }
.reviews__bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-gold-500), #e0a92c); transition: width .4s var(--ease); }
.reviews__bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.reviews__note { grid-column: 1 / -1; display: flex; gap: .5em; align-items: center; margin: 0; padding-top: var(--s-3); border-top: 1px dashed var(--c-gold-200, #eadbb8); font-size: var(--t-xs); color: var(--c-muted); }
.reviews__note svg { color: var(--c-green, #2e7d4f); flex: none; }
.reviews__layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .reviews__layout { grid-template-columns: minmax(0, 1fr) 380px; } .reviews__form { position: sticky; top: var(--s-4); } }
.reviews__title { font-size: var(--t-md); margin: 0 0 var(--s-4); }
.reviews__empty { font-size: var(--t-sm); color: var(--c-muted); margin: 0; padding: var(--s-4); background: var(--c-surface-2); border: 1px dashed var(--c-line); border-radius: var(--radius); }
.commentlist { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); }
.commentlist li.review { margin: 0; padding: 0; }
.review__card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.review__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: hsl(var(--hue) 45% 42%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.review__body { min-width: 0; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .75em; margin-bottom: .3em; }
.review__name { font-size: var(--t-sm); color: var(--c-ink); }
.review__verified { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--c-green, #2e7d4f); background: #edf7ef; }
.review__date { margin-left: auto; font-size: var(--t-xs); color: var(--c-muted); }
.review__card .star-rating { font-size: .95rem; margin-bottom: .45em; }
.review__text { font-size: var(--t-sm); line-height: 1.65; color: var(--c-body); }
.review__text p { margin: 0 0 .5em; } .review__text p:last-child { margin: 0; }
.review__pending { margin: 0 0 .4em; font-size: var(--t-xs); color: var(--c-gold-700, #9a6b12); font-style: italic; }
.reviews__pagination ul { display: flex; gap: var(--s-2); }
.reviews__pagination a, .reviews__pagination span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 .6em; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: var(--t-sm); }
.reviews__pagination .current { background: var(--c-maroon-700); color: #fff; border-color: var(--c-maroon-700); }
.star-rating { display: inline-block; position: relative; width: 5.4em; height: 1em; line-height: 1; font-size: .9em; color: var(--c-gold-500); overflow: hidden; }
.star-rating::before { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; color: #d9d2c4; letter-spacing: .08em; }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; letter-spacing: .08em; }
.reviews__form { background: var(--c-surface); border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold-500); border-radius: var(--radius-lg); padding: var(--s-5); }
#review_form .comment-reply-title { display: block; font-size: var(--t-md); font-weight: 700; margin-bottom: .35em; }
#review_form .comment-notes { font-size: var(--t-xs); color: var(--c-muted); margin: 0 0 var(--s-3); }
#review_form .comment-form { display: grid; gap: var(--s-3); }
@media (min-width: 560px) and (max-width: 899px) { #review_form .comment-form { grid-template-columns: 1fr 1fr; } #review_form .comment-form-comment, #review_form .comment-form-rating, #review_form .form-submit, #review_form .comment-notes { grid-column: 1 / -1; } }
#review_form .comment-form p, #review_form .comment-form-rating { margin: 0; }
#review_form label { display: block; font-size: var(--t-xs); font-weight: 600; margin-bottom: .35em; color: var(--c-body); }
#review_form .required { color: var(--c-red); }
#review_form input[type="text"], #review_form input[type="email"], #review_form textarea { width: 100%; padding: .7em .9em; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: var(--t-sm); background: #fff; }
#review_form input:focus, #review_form textarea:focus { outline: 2px solid var(--c-gold-300); outline-offset: 1px; border-color: var(--c-gold-500); }
#review_form textarea { min-height: 120px; resize: vertical; }
.rating-stars { display: inline-flex; gap: .1em; line-height: 1; }
.rating-stars button { background: none; border: 0; padding: .1em .05em; font-size: 1.9rem; line-height: 1; color: #d9d2c4; cursor: pointer; transition: color .12s var(--ease), transform .12s var(--ease); }
.rating-stars button.is-on { color: var(--c-gold-500); }
.rating-stars button:hover { transform: scale(1.15); }
.rating-stars button:focus-visible { outline: 2px solid var(--c-gold-300); border-radius: 4px; }
#review_form .form-submit { margin: 0; }
#review_form .submit { display: inline-flex; padding: .85em 2em; border: 0; border-radius: 999px; background: var(--c-maroon-700); color: #fff; font-weight: 600; font-size: var(--t-sm); cursor: pointer; transition: background .15s var(--ease); }
#review_form .submit:hover { background: var(--c-maroon-900); }
@media (max-width: 560px) { .reviews__summary { grid-template-columns: 1fr; } .reviews__score { border-right: 0; padding-right: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-gold-200, #eadbb8); } .review__date { margin-left: 0; width: 100%; } }
/* Thumbs strip có overflow-x nhưng ô lưới cha phải cho phép co (min-width:auto của grid item làm gallery rộng 580px ở mobile) */
.product-top > *, .product-gallery, .product-summary { min-width: 0; max-width: 100%; }
.product-gallery__thumbs { min-width: 0; }
#panel-reviews > .reviews { max-width: none; }
.product-tabs__panel#panel-reviews { max-width: none; }