/* GaoNgon Coupons — FULL CSS (v1.3.0)
   - Chip “voucher ticket” (mask, không phụ thuộc màu nền)
   - Panel bên phải + item kiểu ticket
   - Màu lấy từ plugin: --gcp-primary, --gcp-chipbg, --gcp-text
*/

/* ========= Variables (plugin sẽ override bằng inline-style) ========= */
:root{
  --gcp-primary:#5d8f2c;   /* viền/tiêu đề/nút */
  --gcp-chipbg:#f3faea;    /* nền chip */
  --gcp-text:#1a1a1a;      /* text trong panel */
  --voucher-notch:9px;     /* bán kính lỗ chip */
  --voucher-fontsize:14px; /* cỡ chữ chip */
}

/* ========= CHIP LIST (voucher ticket) ========= */
.wpcpo-options{
    border: 3px dashed #c8cbc4!important;
    padding: 10px!important;
    padding-bottom: 0px!important;
    border-radius: 10px!important;
    background: #fafafa!important;
}
.voucher-product{ position:relative; margin-bottom:15px; }
.voucher-product .voucher-thumb{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.voucher-product .voucher-thumb .voucher {
    overflow: hidden;
    display: inline-block;
    margin-right: 5px;
}
.single-product div.product .woocommerce-product-details__short-description {
    color: #555555;
    margin-bottom: 0.5em!important;
}
.popup-cookie .popup-content {
    width: 100%;
    margin: auto;
    position: relative;
    top: 20%;
    max-width: 500px;
}
.voucher-product .voucher-thumb .voucher span {
    border: 0;
    cursor: default;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    padding: 0 15px 0 15px;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #5d8f2c;
    color: #5d8f2c;
    border-radius: 5px;
    padding: 3px 12px;
    position: relative;
    font-size: 18px;
}
.voucher-product .voucher-thumb {
    overflow: hidden;
    position: relative;
}
.voucher-product .voucher-thumb .voucher span:before {
    left: -5px;
}
.voucher-product .voucher-thumb .voucher span:after {
    right: -5px;
}

.voucher-product .voucher-thumb .voucher > span::before,
.voucher-product .voucher-thumb .voucher > span::after{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:1;
  width:10px; height:10px;
  border-radius:50%;
  background:#fff;                 /* màu nền khu vực ngoài chip */
  border:1px solid #5d8f2c;        /* viền lỗ tròn */
}


/* ========= PANEL (drawer) ========= */
.gcp-panel{
  position:fixed; top:0; right:-520px;
  width:520px; max-width:94vw; height:100vh;
  background:#f8fbf9;
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  transition:right .28s ease;
  z-index:99999;
  display:flex; flex-direction:column;
  pointer-events:none; visibility:hidden;
}
.gcp-panel.show{ right:0; pointer-events:auto; visibility:visible; }

.gcp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:var(--gcp-primary);
  color:#fff;
}
.gcp-head h3{ margin:0; font-size:18px; font-weight:900; }
.gcp-close{ background:transparent; border:0; font-size:22px; cursor:pointer; color:#fff; line-height:1; }

.gcp-list{ padding:14px; overflow:auto; max-height:calc(100vh - 140px); }

/* ========= ITEM trong panel (ticket) ========= */
.gcp-item{
  display:grid;
  grid-template-columns:86px 1fr 110px;
  align-items:center;
  gap:14px;
  background:#fff;
  border-radius:18px;
  padding:14px;
  border:1px solid #e6efe9;
  box-shadow:0 3px 14px rgba(0,0,0,.05);
  position:relative;
  margin:10px 0;
}
.gcp-icon{
  width:86px; height:86px;
  border-radius:16px;
  background:var(--gcp-primary);
  border:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gcp-icon svg{ width:34px; height:34px; fill:#fff; }

/* Mép “đục lỗ” giữa cột trái & nội dung */
.gcp-item:before{
  content:"";
  position:absolute; left:86px; top:0; bottom:0; width:14px;
  background:radial-gradient(circle at left center, #f8fbf9 6px, transparent 7px) left/14px 18px repeat-y;
  pointer-events:none;
}

.gcp-info h4{
  margin:0 0 6px 0;
  font-size:15px;
  font-weight:900;
  color:var(--gcp-text);
  text-transform:uppercase;
}
.gcp-info .sub{
  display:flex; flex-wrap:wrap; gap:20px;
  font-size:12px; color:#3a3a3a;
}
.gcp-info .sub strong{ font-weight:900; }

.gcp-copy{
  justify-self:end;
  background:var(--gcp-primary);
  color:#fff; border:0;
  border-radius:999px;
  padding:9px 16px;
  font-weight:900; font-size:13px;
  box-shadow:0 4px 12px rgba(46,159,73,.25);
  transition:filter .12s ease, transform .12s ease;
  cursor:pointer;
}
.gcp-copy:hover{ filter:brightness(.95); transform:translateY(-1px); }

.gcp-foot{ padding:10px 12px; border-top:1px solid #eee; background:#fafafa; }
.gcp-toast{
  position:fixed; bottom:18px; right:18px;
  background:#111; color:#fff;
  padding:10px 14px; border-radius:10px;
  opacity:0; transform:translateY(8px);
  transition:all .25s ease; z-index:999999;
}
.gcp-toast.show{ opacity:1; transform:none; }
.gcp-hi{ box-shadow:0 0 0 3px rgba(46,159,73,.25) inset, 0 0 0 3px rgba(46,159,73,.12); }

/* ========= Responsive ========= */
@media (max-width:480px){
  .voucher-product .voucher-thumb{ gap:10px; }
  .voucher-product .voucher-thumb .voucher > span{ font-size:13px; padding:6px 14px; }
  .gcp-item{ grid-template-columns:72px 1fr; grid-template-rows:auto auto; }
  .gcp-icon{ width:72px; height:72px; }
  .gcp-item:before{ left:72px; }
  .gcp-copy{ grid-column:1/-1; justify-self:stretch; }
}