/* KeyNhanh – đánh giá sản phẩm: section #danh-gia of the product template (kn-reviews.php). Product pages only.
   Same card look as the FAQ accordion (kn-product-page.php). Stars are masked SVG: no WooCommerce icon font, no Gravatar.
   Specificity: the page body has the "woocommerce" class and the list wrapper is #reviews, so WooCommerce rules such as
   ".woocommerce #reviews #respond" (2,1,0) and ".woocommerce #reviews #comments ol.commentlist li" (2,2,2) reach this
   markup. Every rule inside the list, the form and the gate box therefore starts with "#danh-gia #reviews". Links carry
   #danh-gia as well: the kit rule ".elementor-kit-5 a" (0,1,1) would otherwise beat a single class. */

/* ---- Section + rating summary (left column, under the H2) ---------------------------------------------------- */
#danh-gia{background:var(--giay,#FFFBF6)}
.kn-rv-summary{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px}
.kn-rv-summary__score{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kn-rv-summary__avg{font-family:var(--font-tieu-de,"Bricolage Grotesque"),sans-serif;font-weight:800;font-size:48px;letter-spacing:-.02em;line-height:1;color:var(--muc,#1C1410)}
.kn-rv-summary__of{margin-left:-6px;font-family:var(--font-tieu-de,"Bricolage Grotesque"),sans-serif;font-weight:700;font-size:18px;color:var(--chu-phu,#6B5A4E)}
.kn-rv-summary__meta{display:flex;flex-direction:column;gap:4px}
.kn-rv-summary__count{font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:15px;line-height:1.4;color:var(--chu-phu,#6B5A4E)}
#danh-gia a.kn-rv-summary__count{color:var(--cam-dam,#C2410C);text-decoration:underline}
#danh-gia a.kn-rv-summary__count:hover{color:var(--muc,#1C1410)}
.kn-rv-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.kn-rv-bars li{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:10px;margin:0;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:14px;line-height:1.4;color:var(--chu-phu,#6B5A4E)}
.kn-rv-bars__track{display:block;height:8px;border-radius:999px;background:rgba(28,20,16,.1);overflow:hidden}
.kn-rv-bars__fill{display:block;height:100%;border-radius:999px;background:var(--cam-lua,#FF5A1F)}
.kn-rv-bars__n{text-align:right;font-family:var(--font-so,"JetBrains Mono"),monospace}

/* ---- Stars (display): grey row, orange fill of the rating's width ------------------------------------------- */
.kn-rv-stars{--kn-star:18px;position:relative;display:inline-block;flex:0 0 auto;width:calc(var(--kn-star) * 5);height:var(--kn-star);background:#DCCFC2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 6.2 6.7.8-5 4.6 1.3 6.7L12 17.4l-5.9 3.3 1.3-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E") 0 0/var(--kn-star) var(--kn-star) repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 6.2 6.7.8-5 4.6 1.3 6.7L12 17.4l-5.9 3.3 1.3-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E") 0 0/var(--kn-star) var(--kn-star) repeat-x}
.kn-rv-stars__fill{position:absolute;top:0;left:0;bottom:0;background:var(--cam-lua,#FF5A1F)}

/* ---- Review list (right column) ------------------------------------------------------------------------------ */
#kn-danh-gia{display:flex;flex-direction:column;gap:16px;min-width:0}
#danh-gia #reviews,#danh-gia #reviews #comments{display:flex;flex-direction:column;gap:16px;min-width:0}
#danh-gia #reviews .kn-rv-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#danh-gia #reviews #comments ol.commentlist,#danh-gia #reviews #comments ol.children{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;width:100%;background:none}
/* WooCommerce's clearfix pseudo-elements would become flex items and add a gap above and below the list. */
#danh-gia #reviews #comments ol.commentlist::before,#danh-gia #reviews #comments ol.commentlist::after,#danh-gia #reviews #comments ol.commentlist li::before{content:none;display:none}
#danh-gia #reviews #comments ol.commentlist li{margin:0;padding:0;background:none;border:0}
#danh-gia #reviews #comments ol.commentlist li>ol.children{margin-top:12px}
.kn-rv-card{background:var(--kem,#FFF4E8);border:2px solid var(--muc,#1C1410);border-radius:14px;padding:20px 22px}
.kn-rv-card__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kn-rv-avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--muc,#1C1410);color:var(--kem,#FFF4E8);font-family:var(--font-so,"JetBrains Mono"),monospace;font-weight:700;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.kn-rv-card__who{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 180px}
.kn-rv-author{font-family:var(--font-tieu-de,"Bricolage Grotesque"),sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--muc,#1C1410)}
.kn-rv-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:13px;line-height:1.4;color:var(--chu-phu,#6B5A4E)}
.kn-rv-verified,.kn-rv-staff{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-style:normal;font-weight:700;font-size:12px;line-height:1.5;color:var(--muc,#1C1410)}
.kn-rv-verified{background:var(--chanh,#D4FF3A)}
.kn-rv-verified::before{content:"✓";font-weight:700}
.kn-rv-staff{background:var(--cam-lua,#FF5A1F)}
.kn-rv-card__text{margin-top:14px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:16px;line-height:1.7;color:var(--muc,#1C1410);overflow-wrap:anywhere}
.kn-rv-card__text p{margin:0 0 .6em}
.kn-rv-card__text>:last-child{margin-bottom:0}
.kn-rv-pending{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,90,31,.12);font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:14px;line-height:1.5;color:var(--cam-dam,#C2410C)}
.kn-rv-item--reply .kn-rv-card{margin-left:44px;background:var(--giay,#FFFBF6);border-style:dashed}
.kn-rv-item--reply .kn-rv-avatar{background:var(--cam-lua,#FF5A1F);color:var(--muc,#1C1410)}
.kn-rv-empty{margin:0;padding:20px 22px;background:var(--kem,#FFF4E8);border:2px dashed var(--muc,#1C1410);border-radius:14px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:16px;line-height:1.6;color:var(--muc,#1C1410)}
.kn-rv-pagination{font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:15px}
#danh-gia .kn-rv-pagination .page-numbers{display:inline-block;margin:0 4px 0 0;padding:6px 12px;border:2px solid var(--muc,#1C1410);border-radius:10px;color:var(--muc,#1C1410);text-decoration:none}
#danh-gia .kn-rv-pagination .page-numbers.current{background:var(--muc,#1C1410);color:var(--kem,#FFF4E8)}

/* ---- Form (logged-in buyer) ---------------------------------------------------------------------------------- */
#danh-gia #reviews #respond{position:static;margin:0;padding:22px;width:auto;background:var(--kem,#FFF4E8);border:2px solid var(--muc,#1C1410);border-radius:14px}
#danh-gia #reviews #respond p{margin:0}
#danh-gia #reviews #respond .comment-reply-title{display:block;margin:0 0 6px;font-family:var(--font-tieu-de,"Bricolage Grotesque"),sans-serif;font-weight:700;font-size:22px;line-height:1.3;color:var(--muc,#1C1410)}
#danh-gia #reviews #respond .comment-reply-title small{display:none}
#danh-gia #reviews #respond .kn-rv-form__as{margin:0 0 18px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:14px;line-height:1.6;color:var(--chu-phu,#6B5A4E)}
#danh-gia #reviews #respond label{display:block;margin:0 0 8px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-weight:700;font-size:14px;line-height:1.4;color:var(--muc,#1C1410)}
#danh-gia #reviews #respond .required{color:var(--cam-dam,#C2410C);text-decoration:none}
#danh-gia #reviews #respond .comment-form-rating{margin:0 0 18px}
/* The select is what is sent; WooCommerce's single-product.js hides it and draws the star links in front of it. */
#danh-gia #reviews #respond select#rating{display:block;width:auto;min-height:44px;padding:8px 12px;border:2px solid var(--muc,#1C1410);border-radius:10px;background:var(--giay,#FFFBF6);font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:15px;color:var(--muc,#1C1410)}
/* Star links: the star shape is a masked ::before, so the link itself keeps a visible focus outline (a mask on the
   link would clip it). Links touch each other (no gap), so the pointer is always over one of them. */
#danh-gia #reviews #respond p.stars{display:inline-flex;margin:0;line-height:1}
#danh-gia #reviews #respond p.stars>span{display:flex;gap:0}
#danh-gia #reviews #respond p.stars a{position:relative;display:block;width:40px;height:40px;margin:0;font-size:0;text-indent:-999em;overflow:hidden;border-radius:8px;text-decoration:none;cursor:pointer}
#danh-gia #reviews #respond p.stars a::before{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;text-indent:0;background:#DCCFC2;transition:background-color .1s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 6.2 6.7.8-5 4.6 1.3 6.7L12 17.4l-5.9 3.3 1.3-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 6.2 6.7.8-5 4.6 1.3 6.7L12 17.4l-5.9 3.3 1.3-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Fill states, in this order: chosen stars, stars after the chosen one, hover preview, stars after the hovered one. */
#danh-gia #reviews #respond p.stars.selected a::before{background:var(--cam-lua,#FF5A1F)}
#danh-gia #reviews #respond p.stars.selected a.active~a::before{background:#DCCFC2}
#danh-gia #reviews #respond p.stars:hover a::before{background:var(--cam-lua,#FF5A1F)}
#danh-gia #reviews #respond p.stars:hover a.active~a::before{background:var(--cam-lua,#FF5A1F)}
#danh-gia #reviews #respond p.stars:hover a:hover~a::before{background:#DCCFC2}
#danh-gia #reviews #respond p.stars a:focus-visible{outline:3px solid var(--cam-dam,#C2410C);outline-offset:0;box-shadow:none}
#danh-gia #reviews #respond .comment-form-comment{margin:0}
#danh-gia #reviews #respond textarea{box-sizing:border-box;display:block;width:100%;height:auto;min-height:140px;margin:0;padding:12px 14px;border:2px solid var(--muc,#1C1410);border-radius:10px;background:var(--giay,#FFFBF6);font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:16px;line-height:1.6;color:var(--muc,#1C1410);resize:vertical;transition:none}
#danh-gia #reviews #respond textarea::placeholder{color:#7A685B;opacity:1}
#danh-gia #reviews #respond textarea:focus,#danh-gia #reviews #respond select#rating:focus{border-color:var(--muc,#1C1410);outline:3px solid var(--cam-dam,#C2410C);outline-offset:2px;box-shadow:none}
#danh-gia #reviews #respond .form-submit{margin:18px 0 0}
#danh-gia #reviews #respond input#submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:2px solid var(--muc,#1C1410);border-radius:12px;background:var(--cam-lua,#FF5A1F);color:var(--muc,#1C1410);font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;transition:background-color .15s,color .15s}
#danh-gia #reviews #respond input#submit:hover{background:var(--muc,#1C1410);color:var(--kem,#FFF4E8)}
#danh-gia #reviews #respond input#submit:focus-visible{outline:3px solid var(--cam-dam,#C2410C);outline-offset:3px;box-shadow:none}

/* ---- Gate box (guest, not a buyer, already reviewed) --------------------------------------------------------- */
#danh-gia #reviews .kn-rv-gate{padding:22px;background:var(--kem,#FFF4E8);border:2px solid var(--muc,#1C1410);border-radius:14px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;color:var(--muc,#1C1410)}
#danh-gia #reviews .kn-rv-gate h3{margin:0 0 8px;font-family:var(--font-tieu-de,"Bricolage Grotesque"),sans-serif;font-weight:700;font-size:22px;line-height:1.3;color:var(--muc,#1C1410)}
#danh-gia #reviews .kn-rv-gate p{margin:0 0 12px;font-size:16px;line-height:1.6}
#danh-gia #reviews .kn-rv-gate p:last-child{margin-bottom:0}
#danh-gia #reviews .kn-rv-gate .kn-rv-gate__note{font-size:14px;color:var(--chu-phu,#6B5A4E)}
#danh-gia #reviews .kn-rv-gate a:not(.kn-rv-btn){color:var(--cam-dam,#C2410C);text-decoration:underline}
#danh-gia #reviews .kn-rv-gate a:not(.kn-rv-btn):hover{color:var(--muc,#1C1410)}
#danh-gia #reviews .kn-rv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:2px solid var(--muc,#1C1410);border-radius:12px;background:var(--muc,#1C1410);color:var(--kem,#FFF4E8);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;transition:background-color .15s,color .15s}
#danh-gia #reviews .kn-rv-btn:hover{background:var(--cam-lua,#FF5A1F);color:var(--muc,#1C1410)}
#danh-gia #reviews .kn-rv-btn:focus-visible{outline:3px solid var(--cam-dam,#C2410C);outline-offset:3px;box-shadow:none}

@media (max-width:767px){
  .kn-rv-card,.kn-rv-empty{padding:16px 18px}
  #danh-gia #reviews #respond,#danh-gia #reviews .kn-rv-gate{padding:16px 18px}
  .kn-rv-summary__avg{font-size:40px}
  .kn-rv-item--reply .kn-rv-card{margin-left:16px}
  #danh-gia #reviews #respond p.stars a{width:44px;height:44px}
  #danh-gia #reviews #respond p.stars a::before{top:5px;left:5px;width:34px;height:34px}
}

/* ---- Customer feedback cards (testimonials.php): one card per entry, same classes and look as the review
   cards (.kn-rv-card…), single column like the review list, no heading (owner 12/10/2026). ----------------------------- */
#danh-gia #reviews .kn-tm{display:flex;flex-direction:column;gap:12px;min-width:0}
#danh-gia #reviews .kn-tm__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
#danh-gia #reviews .kn-tm__list.is-collapsed .kn-tm__item--extra{display:none}
#danh-gia #reviews .kn-tm__item{margin:0;padding:0;border-radius:14px}
#danh-gia #reviews .kn-tm__item:focus-visible{outline:3px solid var(--cam-dam,#C2410C);outline-offset:2px}
#danh-gia #reviews .kn-tm__more{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:10px 20px;border:2px solid var(--muc,#1C1410);border-radius:12px;background:transparent;color:var(--muc,#1C1410);font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-weight:700;font-size:15px;line-height:1.2;text-transform:none;cursor:pointer;transition:background-color .15s,color .15s}
#danh-gia #reviews .kn-tm__more:hover{background:var(--muc,#1C1410);color:var(--kem,#FFF4E8)}
#danh-gia #reviews .kn-tm__more:focus-visible{outline:3px solid var(--cam-dam,#C2410C);outline-offset:3px;box-shadow:none}
/* Author CSS would otherwise override the hidden attribute's display:none. */
#danh-gia #reviews .kn-tm__more[hidden]{display:none}


/* ---- Buy box rating line (buybox.php): under "Không phát sinh thêm chi phí" on the dark buy box. #kn-rating beats
   the kit's link colour. ---------------------------------------------------------------------------------------- */
#kn-rating .kn-buy-rating{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-family:var(--font-noi-dung,"Be Vietnam Pro"),sans-serif;font-size:14px;line-height:1.4;color:var(--chu-phu-toi,#C9B8A8);text-decoration:none}
#kn-rating .kn-rv-stars{background:rgba(255,244,232,.28)}
#kn-rating .kn-buy-rating__avg{font-family:var(--font-so,"JetBrains Mono"),monospace;font-weight:700;color:var(--kem,#FFF4E8)}
#kn-rating .kn-buy-rating__count{text-decoration:underline;text-decoration-color:rgba(255,244,232,.35);text-underline-offset:3px}
#kn-rating .kn-buy-rating:hover .kn-buy-rating__count{color:var(--kem,#FFF4E8);text-decoration-color:currentColor}
#kn-rating .kn-buy-rating:focus-visible{outline:3px solid var(--chanh,#D4FF3A);outline-offset:4px;border-radius:6px;box-shadow:none}