/* ============================================================
   VioStore — Mã giảm giá (mặt tiền)

   Dùng lại biến của theme (--brand, --line, --fg-2…) và luôn kèm giá trị dự
   phòng: plugin phải còn nhìn được nếu sau này site đổi theme.
   ============================================================ */

.vio-mgg-row > td {
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.vio-mgg {
  border: 1px dashed var(--line, #E7E9EE);
  border-radius: var(--r, 12px);
  padding: 10px 12px;
  background: var(--line-2, #F1F3F6);
}

/* Nút "Bạn có mã giảm giá?" — trông như một dòng chữ bấm được, không phải nút
   to tranh chỗ với nút Đặt hàng. */
.vio-mgg-mo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--fg, #0E1116);
  text-align: left;
  cursor: pointer;
}

.vio-mgg-mo:hover { color: var(--price, #E11D2A); }

.vio-mgg-mo-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand, #FFD400);
  color: var(--brand-ink, #0E1116);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.vio-mgg-mo::after {
  content: "▾";
  margin-left: auto;
  color: var(--fg-3, #8A93A0);
  font-size: 12px;
}

.vio-mgg-mo[aria-expanded="true"]::after { content: "▴"; }

.vio-mgg-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.vio-mgg-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line, #E7E9EE);
  border-radius: var(--r-sm, 8px);
  background: var(--card, #fff);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.vio-mgg-input:focus {
  outline: 0;
  border-color: var(--brand, #FFD400);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 255, 212, 0), .35);
}

/* `.button` chung của theme đặt min-height:48px — ghi đè để nút áp mã cao bằng
   ô nhập cạnh nó, chứ không cao hơn 6px. */
.vio-mgg .vio-mgg-ap {
  flex: 0 0 auto;
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: var(--ink, #0E1116);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.vio-mgg .vio-mgg-ap:hover { background: var(--ink-3, #2A313C); }
.vio-mgg .vio-mgg-ap[disabled] { opacity: .6; cursor: default; }

.vio-mgg-msg { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.vio-mgg-msg:empty { display: none; }
.vio-mgg-msg.is-ok { color: var(--ok, #0E9F6E); }
.vio-mgg-msg.is-loi { color: var(--price, #E11D2A); }

/* WooCommerce trả về nguyên khối thông báo của nó — bỏ khung mặc định để nó
   nằm gọn trong hộp mã giảm giá. */
.vio-mgg-msg ul,
.vio-mgg-msg .woocommerce-error,
.vio-mgg-msg .woocommerce-message {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
  color: inherit;
  font-size: inherit;
}

.vio-mgg-msg .woocommerce-message::before,
.vio-mgg-msg .woocommerce-error::before,
.vio-mgg-msg li::before { content: none; }

.vio-mgg-msg .button { display: none; } /* nút "Xem giỏ hàng" của Woo, thừa ở đây */

/* Dòng mã đang áp trong bảng đơn hàng. */
.woocommerce-checkout-review-order-table .cart-discount th,
.woocommerce-checkout-review-order-table .cart-discount td { color: var(--ok, #0E9F6E); }

.woocommerce-checkout-review-order-table .cart-discount .woocommerce-remove-coupon {
  margin-left: 6px;
  color: var(--fg-3, #8A93A0);
  font-size: 12px;
  text-decoration: underline;
}

/* ---------- Trang Tài khoản → Mã giảm giá ---------- */

.vio-mgg-ds { display: grid; gap: 12px; }

.vio-mgg-the {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line, #E7E9EE);
  border-left: 4px solid var(--brand, #FFD400);
  border-radius: var(--r, 12px);
  background: var(--card, #fff);
}

.vio-mgg-the.is-het { border-left-color: var(--line, #E7E9EE); opacity: .65; }

.vio-mgg-ma {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink, #0E1116);
}

.vio-mgg-giam { font-weight: 700; color: var(--price, #E11D2A); }
.vio-mgg-phu { flex: 1 1 220px; color: var(--fg-2, #4B5563); font-size: 13px; }

.vio-mgg-chep {
  padding: 8px 14px;
  border: 1px solid var(--line, #E7E9EE);
  border-radius: var(--r-sm, 8px);
  background: var(--card, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.vio-mgg-chep:hover { border-color: var(--brand, #FFD400); }

@media (max-width: 480px) {
  .vio-mgg-form { flex-wrap: wrap; }
  .vio-mgg .vio-mgg-ap { width: 100%; }
}