/* Khung tool: lay dung khoi cua theme (vien nhat #e4e9ec, bo 10px, nen trang)
   giong .col.product-small .col-inner va khoi thuoc tinh o trang san pham. */
#qka-tool-vang-theo-mon {
  position: relative;
  width: 100%;
  padding: 16px;
  border: 1px solid #e4e9ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 8px rgba(235, 237, 240, 0.3);
  color: #333;
}

#qka-tool-vang-theo-mon [hidden] {
  display: none !important;
}

#qka-tool-vang-theo-mon h3 {
  margin: 0 0 16px;
}

#qka-tool-vang-theo-mon .qka-tvm-step-count {
  display: block;
  margin-bottom: 4px;
  color: #777;
  font-size: 13px;
}

#qka-tool-vang-theo-mon .qka-tvm-question {
  margin: 0 0 12px;
  color: #333;
  font-weight: 700;
}

#qka-tool-vang-theo-mon .qka-tvm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#qka-tool-vang-theo-mon .qka-tvm-dish-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4e9ec;
}

/* Chip chon: cung ho nut cua theme (bo 8px nhu .added_to_cart, do #7c071c).
   Chon roi = nut do dac chu trang, khong dung mau/hieu ung la. Radius 6px = dung
   nut chuan theme (nut "Dat mua" trang san pham).
   CSS toan file dung selector ID (#qka-tool-vang-theo-mon) chu khong phai class:
   theme co 2 luat manh hon moi chain class thuan tuy, chi can trong bai viet:
     #content.blog-wrapper .article-inner a { color:#7c071c }   -> (1,3,1)
     .button:not(.icon) { border-radius:100px !important }
   nen chu nut CTA bi keo ve do va nut bi ep thanh vien thuoc. */
#qka-tool-vang-theo-mon .qka-tvm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid #e4e9ec;
  border-radius: 6px !important;
  background-color: #fff;
  box-shadow: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

#qka-tool-vang-theo-mon .qka-tvm-chip:hover,
#qka-tool-vang-theo-mon .qka-tvm-chip:focus {
  border-color: #7c071c;
  background-color: #fff;
  box-shadow: none;
  color: #7c071c;
}

#qka-tool-vang-theo-mon .qka-tvm-chip.is-active {
  border-color: #7c071c;
  background-color: #7c071c;
  box-shadow: none;
  color: #fff;
  font-weight: 600;
}

#qka-tool-vang-theo-mon .qka-tvm-option-list,
#qka-tool-vang-theo-mon .qka-tvm-field + .qka-tvm-field {
  margin-top: 12px;
}

#qka-tool-vang-theo-mon .qka-tvm-field {
  padding-top: 12px;
  border-top: 1px solid #e4e9ec;
}

#qka-tool-vang-theo-mon .qka-tvm-field-label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 700;
}

#qka-tool-vang-theo-mon .qka-tvm-actions,
#qka-tool-vang-theo-mon .qka-tvm-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Nut hanh dong cua tool = nut chuan theme (owner chot 24/08: cao 45px, bo 6px).
   Bat buoc !important vi customizer in SAU wp_head:
   .button:not(.icon){border-radius:100px!important} se ep thanh vien thuoc. */
#qka-tool-vang-theo-mon .qka-tvm-actions .button,
#qka-tool-vang-theo-mon .qka-tvm-result-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  margin: 0;
  border-radius: 6px !important;
  text-transform: none;
  letter-spacing: 0;
}

#qka-tool-vang-theo-mon .qka-tvm-results {
  padding-top: 4px;
}

#qka-tool-vang-theo-mon .qka-tvm-result-status,
#qka-tool-vang-theo-mon .qka-tvm-panel-reason {
  margin: 0;
  color: #333;
}

#qka-tool-vang-theo-mon .qka-tvm-panel {
  margin-top: 20px;
  padding-top: 12px;
}

#qka-tool-vang-theo-mon .qka-tvm-panel-reason {
  margin-bottom: 12px;
  font-weight: 700;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .related .row {
  margin-bottom: 0;
}

/* ==========================================================================
   CARD SAN PHAM TRONG TOOL (scope #qka-tool-vang-theo-mon, KHONG dung theme)
   Cot bai viet chi ~885px nen card 4 cot con 192px -> dai thuoc tinh 3 muc va
   nut tran chu. O day: 3 cot desktop (card ~273px, xap xi card danh muc 283px),
   bo giong nho de dai thuoc tinh con 1 dong, nut "Them vao gio hang" thanh nut
   dac kieu trang san pham (bo 6px). Moi phan cao co dinh => card cao deu, khong can
   equalize-box (JS equalize chinh la thu lam vo card khi panel con hidden).
   ========================================================================== */

/* Xep doc: anh -> tieu de -> dai thuoc tinh -> nut, nut luon nam day card. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small > .col-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner > .box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* width/align-self BAT BUOC: ruot .box-image toan la phan tu position:absolute
   nen chieu rong noi tai = 0; khi .box thanh flex column no khong tu keo rong ra
   -> anh chai bien mat (rong 0, cao 263). Day cung la ly do qka-mobile-scroll.php
   phai ep width:100%+align-self:stretch cho .box-image trong carousel mobile. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .box > .box-image {
  flex: 0 0 auto;
  width: 100%;
  align-self: stretch;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .box > .box-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto !important;
  padding: 14px 14px 12px;
}

/* Tieu de: kep dung 2 dong, cao co dinh de moi card bang nhau.
   Mau chu lay dung card trang danh muc (do bang may: rgb(41,43,45), 700).
   Neu khong ep, luat #content.blog-wrapper .article-inner a keo ten SP sang do. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .title-wrapper {
  min-height: 40px;
  height: auto !important;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-title {
  margin: 0;
  height: auto !important;
  font-size: 15px;
  line-height: 20px;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-title a {
  display: -webkit-box;
  overflow: hidden;
  color: #292b2d;
  font-weight: 700;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-title a:hover {
  color: #7c071c;
}

/* Dai thuoc tinh: 1 dong "750 ml . 13,5%". Giong nho la muc dai nhat va hay
   xuong dong -> an trong tool (mobile theme cung an san). Co xuat xu giu nguyen
   (absolute, nam canh badge gia) dung nhu card that. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes {
  margin: auto -14px 0;
  padding: 9px 10px;
  gap: 14px;
  justify-content: center;
  overflow: hidden;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes .patt-item.pa_giong-nho {
  display: none !important;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes .patt-item {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes .patt-value {
  white-space: nowrap;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes span[class^='qkawine-icon-'] {
  font-size: 1.4em;
}

/* Nut "Them vao gio hang": nut that kieu trang san pham (do dac, bo 6px theo nut
   chuan theme owner chot; cao 40px theo yeu cau rieng cua G2 vi card chi 263px),
   bo mui ten va hieu ung truot ngang cua theme. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .add-to-cart-button {
  height: auto !important;
  margin-top: 12px;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button,
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #7c071c;
  border-radius: 6px !important;
  background-color: #7c071c;
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
  transform: none;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button:hover,
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button:focus {
  border-color: #5f0515;
  background-color: #5f0515;
  box-shadow: none;
  opacity: 1;
  color: #fff;
  transform: none;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button::after {
  content: none !important;
}

/* Sau khi them: doi sang nut vien do "Xem gio hang" -> khong nhay layout. */
#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .added_to_cart {
  margin-top: 12px;
  background-color: #fff;
  color: #7c071c;
  line-height: 1.2;
}

#qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button.loading {
  color: #fff;
}

/* Mobile: 2 card/man hinh, cuon ngang native (qka-mobile-scroll dat 78% cho
   carousel "san pham tuong tu"; trong tool nay bai viet hep nen chia doi). */
@media (max-width: 849px) {
  #qka-tool-vang-theo-mon .qka-tvm-panel .related-products-wrapper .qka-native > .col {
    width: 48% !important;
    max-width: 48% !important;
  }

  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .box > .box-text {
    padding: 10px 10px 10px;
  }

  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-attributes {
    margin: auto -10px 0;
    padding: 7px 6px;
    gap: 8px;
  }

  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .title-wrapper {
    min-height: 38px;
  }

  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .product-title {
    font-size: 14px;
    line-height: 19px;
  }

  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .button.add_to_cart_button,
  #qka-tool-vang-theo-mon .qka-tvm-panel .col.product-small .col-inner .added_to_cart {
    padding: 0 4px;
    font-size: 13px;
  }
}

#qka-tool-vang-theo-mon .qka-tvm-static-links,
#qka-tool-vang-theo-mon .qka-tvm-age-note {
  margin: 14px 0 0;
  color: #777;
  font-size: 13px;
}

#qka-tool-vang-theo-mon .qka-tvm-age-note {
  margin-top: 4px;
}

#qka-tool-vang-theo-mon .qka-tvm-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  margin: 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: #333;
  color: #fafafa;
  font-size: 14px;
}

@media (min-width: 768px) {
  #qka-tool-vang-theo-mon {
    padding: 24px;
  }

  #qka-tool-vang-theo-mon .qka-tvm-field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  #qka-tool-vang-theo-mon .qka-tvm-field-label {
    margin: 10px 0 0;
  }

  #qka-tool-vang-theo-mon .qka-tvm-chip-list {
    gap: 10px;
  }
}

#qka-tool-vang-theo-mon .qka-tvm-advanced {
  margin: 4px 0 0;
  padding: 0;
  border: none;
}

#qka-tool-vang-theo-mon .qka-tvm-advanced summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
  color: #7c071c;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

#qka-tool-vang-theo-mon .qka-tvm-advanced summary::-webkit-details-marker {
  display: none;
}

#qka-tool-vang-theo-mon .qka-tvm-advanced summary::before {
  content: '+';
  display: inline-block;
  width: 18px;
  margin-right: 4px;
  font-size: 16px;
}

#qka-tool-vang-theo-mon .qka-tvm-advanced[open] summary::before {
  content: '−';
}

#qka-tool-vang-theo-mon .qka-tvm-advanced .qka-tvm-option-list {
  margin-top: 8px;
}