/* base & summary */
.vreview-wrap{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;border:1px solid #eee;border-radius:12px;padding:16px;background:#fff}
.vreview-title{margin:0 0 12px;font-size:20px;font-weight:700}
.vreview-summary{display:grid;grid-template-columns:160px 1fr auto;gap:16px;align-items:center;border:1px solid #f0f0f0;border-radius:12px;padding:12px;background:#fafafa}
.vreview-summary .avg{display:flex;flex-direction:column;align-items:center;justify-content:center}
.vreview-summary .avg-num{font-size:40px;line-height:1;font-weight:700;color:#111}
.vreview-summary .avg-text{opacity:.6;margin-top:2px}
.vreview-summary .avg-count{margin-top:6px;font-size:12px;color:#555}
.vreview-summary .dist .dist-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.vreview-summary .dist .star-label{min-width:42px;text-align:right;color:#666}
.vreview-summary .dist .star{color:#f7b500}
.vreview-summary .dist .bar{flex:1;height:8px;background:#eee;border-radius:999px;overflow:hidden}
.vreview-summary .dist .bar span{display:block;height:100%;background:#2d7ef7}
.vreview-summary .dist .percent{min-width:42px;text-align:left;color:#666}
.vreview-summary .cta .vbtn{padding:10px 16px;border-radius:8px;background:#2d7ef7;color:#fff;border:0;cursor:pointer;font-weight:600}

/* list */
.vreview-list .vreview-item{border-top:1px solid #eee;padding:12px 0}
.vreview-list .vreview-item:first-child{border-top:0}
.vreview-item .head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vreview-item .stars-inline .s{color:#ccc}
.vreview-item .stars-inline .s.on{color:#f7b500}
.vreview-item .subline{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.vreview-item .subline .recommend{display:inline-flex;align-items:center;gap:6px;color:#d23c3c;font-size:13px}
.vreview-item .subline .recommend .txt{color:#555}
.vreview-item .images{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.vreview-item .images img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #eee}

/* buyer badge round check */
.vreview-item .head .badge-buyer{display:inline-flex;align-items:center;gap:6px;color:#16a34a;font-weight:600}
.vreview-item .head .badge-buyer .ico{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background:#16a34a;color:#fff;font-size:7px;line-height:1}
.vreview-item .head .badge-buyer .txt{color:#16a34a;font-size: 12px;font-weight: 400;}

.vreview-pagi{margin-top:10px;display:flex;gap:6px}
.vreview-pagi a{padding:6px 10px;border:1px solid #eee;border-radius:6px;text-decoration:none}
.vreview-pagi a.current{background:#2d7ef7;color:#fff;border-color:#2d7ef7}

/* modal (review form) */
.vrev-modal{position:fixed;inset:0;display:none;z-index:999999;overflow:auto}
.vrev-modal.is-open{display:block}
.vrev-modal__overlay{position:fixed;inset:0;background:rgba(17,17,20,.5);z-index:1}
/* FIX: ensure the form never goes below viewport height on desktop */
.vrev-modal__content{position:relative;background:#fff;width:min(620px,94vw);margin:3vh auto;padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:2;max-height:none;overflow:visible;display:flex;flex-direction:column}
.vrev-modal__close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.vrev-target{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;margin-top:4px;margin-bottom:8px;flex-direction:column}
.vrev-target img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid #eee}
.vrev-target .tt{font-weight:600}

/* stars - compact responsive */
.vrev-stars-block{display:flex;justify-content:space-between;gap:2px;padding:0 2px;margin:4px 0 8px;max-width:100%}
.vrev-stars-block li{list-style:none;text-align:center;flex:1 1 0;min-width:0}
.vrev-stars-block .star{font-size:clamp(18px,5.2vw,26px);line-height:1;background:transparent;border:0;cursor:pointer;color:#ddd;width:1em;height:1em}
.vrev-stars-block li.on .star{color:#f7b500}
.vrev-stars-block .lab{margin-top:-30px;font-size:clamp(9px,2.6vw,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrev-stars-block li.active .lab{color:#f7b500;font-weight:600}

#vrev-form{display:flex;flex-direction:column}
#vrev-form .field{margin:5px 0}
#vrev-form textarea{width:100%;min-height:100px;padding:10px;border:1px solid #ddd;border-radius:8px}
#vrev-form .two{display:flex;gap:10px}
#vrev-form .two input{flex:1}
#vrev-form input[type="text"],#vrev-form input[type="tel"]{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
#vrev-form .consent,#vrev-form .recommend{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:13px;color:#444}
.vbtn.vbtn--primary{background:#2d7ef7;color:#fff;border:0;border-radius:8px;padding:10px 16px;cursor:pointer;font-weight:600;margin-top:8px}
.vbtn.vbtn--outline{background:#fff;border:1px solid #d0d7e5;color:#334;border-radius:8px;padding:6px 10px;cursor:pointer}
.vrev-msg{margin-top:8px;color:#c00}
.vrev-msg.ok{color:#2a8a2a}

/* Lightbox header + arrows as in v1.1.4 */
.vrev-lightbox{position:fixed;inset:0;z-index:1000000}
.vrev-lightbox .vrev-lb__overlay{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.vrev-lightbox .vrev-lb__box{position:absolute;inset:2% 2%;display:flex;flex-direction:column;background:transparent}
.vrev-lb__top{background:#fff;color:#111;border-bottom:1px solid #eee;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-radius:8px 8px 0 0}
.vrev-lb__title{font-weight:600}
.vrev-lb__close{background:#fff;border:0;border-radius:999px;width:36px;height:36px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.vrev-lb__stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;border-radius:0 0 8px 8px}
.vrev-lb__img{max-width:92vw;max-height:80vh;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.vrev-lb__prev,.vrev-lb__next{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;border-radius:0;color:#222;font-size:32px;width:auto;height:auto;padding:0 8px;cursor:pointer;opacity:.9}
.vrev-lb__prev{left:12px}.vrev-lb__next{right:12px}

@media (max-width:768px){

 .vreview-summary{grid-template-columns:1fr;gap:10px}
 .vrev-lb__img{max-height:68vh}
 .vrev-modal__content{margin:0 auto;max-height:96vh}
}

/* ===== Compact modal on desktop so button is visible without inner scroll ===== */
@media (min-width: 768px){
  .vrev-modal__content{margin:2vh auto;padding:12px 14px;border-radius:14px}
  .vrev-target{margin-top:2px;margin-bottom:6px}
  .vrev-target img{width:56px;height:56px}
  .vrev-target .tt{font-size:16px;line-height:1.3}
  .vrev-stars-block{gap:2px;margin:2px 0 6px}
  .vrev-stars-block .star{font-size:20px}
  .vrev-stars-block .lab{font-size:11px}
  #vrev-form .field{margin:2px 0}
  #vrev-form textarea{min-height:80px;padding:8px}
  #vrev-form .two{gap:8px}
  #vrev-form input{
    margin-bottom:0 !important;
  }
  #vrev-form input[type="text"], #vrev-form input[type="tel"]{padding:8px}
  #vrev-form .consent, #vrev-form .recommend{font-size:12.5px;margin-top:4px}
  .vbtn.vbtn--primary{padding:10px 14px;margin-top:6px}
  .vrev-msg{margin-top:6px}
  .vrp-replies{
        width: 70%;
  }

}

/* Mobile top/bottom spacing 10px for review modal */
@media (max-width: 768px){
  .vrev-modal__content{margin:10px auto !important;}
}

/* Q&A captcha field */
#vrev-form .field.qa input[type="text"]{width:100%;padding:8px;border:1px solid #ddd;border-radius:8px}
#vrev-form .field.qa{margin:8px 0}

/* Inline QA row so it doesn't push the submit button */
#vrev-form .field.qa-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
#vrev-form .field.qa-row .qa-label{white-space:nowrap;min-width:max(120px, 28%);font-weight:600;color:#333}
#vrev-form .field.qa-row input[type="text"]{flex:1;min-width:0}
@media (max-width:480px){
  #vrev-form .field.qa-row{gap:8px}
  #vrev-form .field.qa-row .qa-label{min-width:34%}
}

#vrev-form .field.qa-block{margin:2px 0}
#vrev-form .field.qa-block .qa-label{color:#333;font-size: 13px;}

/* ===== Compact mobile spacing (v1.1.18) ===== */
@media (max-width: 768px){
  .vrev-modal__content{padding:10px 12px;margin:10px auto;border-radius:14px}
  .vrev-target{margin:4px 0}
  .vrev-target img{width:52px;height:52px}
  .vrev-target .tt{font-size:16px;line-height:1.25;margin:0}
  .vrev-stars-block{margin:2px 0 6px;gap:4px}
  #vrev-form .field{margin:6px 0}
  #vrev-form textarea{min-height:80px;padding:8px}
  #vrev-form .two{gap:8px}
  #vrev-form input[type="text"],#vrev-form input[type="tel"]{padding:8px}
  #vrev-form .consent,#vrev-form .recommend{margin-top:4px;font-size:13px;line-height:1.3}
  #vrev-form .field.images label{display:block;margin-bottom:4px}
  #vrev-form .field.qa-block{margin:2px 0}
  #vrev-form .field.qa-block .qa-label{margin-bottom:4px}
}

/* ==== COMPACT MOBILE (no inner scroll) ==== */
@media (max-width: 768px){

  /* Không cho khung form trượt – hiển thị gọn trong viewport */
  .vrev-modal{overflow: hidden;}
  .vrev-modal__content{
    width: 94vw;
    margin: 8px auto !important;
    padding: 10px 12px;
    border-radius: 12px;
    max-height: none;     /* bỏ giới hạn chiều cao */
    overflow: visible;    /* KHÔNG cuộn bên trong */
  }

  /* Giảm cỡ chữ nền tảng trong modal */
  .vrev-modal__content,
  .vrev-modal__content *{
    font-size: 13px;          /* base */
    line-height: 1.3;
  }

  /* Tiêu đề/target nhỏ lại */
  .vrev-target{margin: 2px 0 6px}
  .vrev-target img{width: 44px; height: 44px}
  .vrev-target .tt{font-size: 15px; margin: 0}

  /* Sao & nhãn dưới sao gọn lại */
  .vrev-stars-block{gap: 2px; margin: 0 0 6px; padding: 0}
  .vrev-stars-block .star{font-size: 18px}
  .vrev-stars-block .lab{font-size: 10.5px; margin-top: -14px !important}

  /* Trường nhập: thu padding + khoảng cách dọc */
  #vrev-form .field{margin: 4px 0}
  #vrev-form textarea{
    min-height: 64px;
    padding: 6px 8px;
  }
  #vrev-form .two{
    display: flex;
    flex-direction: column;   /* 1 cột để tiết kiệm chiều ngang */
    gap: 6px;
  }
  #vrev-form input[type="text"],
  #vrev-form input[type="tel"]{
    padding: 6px 8px;
    height: 34px;             /* thấp hơn mặc định */
  }

  /* Nhãn dài, checkbox… không chiếm chỗ */
  #vrev-form .consent,
  #vrev-form .recommend{
    font-size: 12.5px;
    gap: 6px;
    margin-top: 4px;
  }

  /* Khối QA (captcha) nén lại */
  #vrev-form .field.qa{margin: 4px 0}
  #vrev-form .field.qa-row{gap: 6px; flex-wrap: nowrap}
  #vrev-form .field.qa-row .qa-label{
    min-width: 30%;
    font-weight: 600;
    font-size: 12.5px;
    white-space: normal;
  }
  #vrev-form .field.qa-row input[type="text"]{
    padding: 6px 8px; height: 34px;
  }

  /* Nút gửi gọn hơn, không sticky để tránh chiếm chỗ */
  .vbtn.vbtn--primary{
    padding: 10px 12px;
    font-weight: 600;
    width: 100%;
    position: static;
    margin-top: 8px;
  }

  /* Thông báo dưới cùng không đẩy bố cục quá cao */
  .vrev-msg{margin-top: 6px; font-size: 12.5px}
}