/* Widget đánh giá sản phẩm — Tổng Kho Mã Vạch
   Style theo template sản phẩm (style-datalogic.css): nền sáng, tiêu đề serif,
   nhãn nhỏ viết hoa, góc vuông, màu nhấn xanh. Dùng biến CSS của template,
   có giá trị dự phòng nếu trang không nạp style-datalogic.css. */

/* ─── Khung section (dùng class của template: section-header + section-title) ─── */
.section-reviews{background:var(--bg-panel,#fff);padding:110px 52px}
.section-reviews .section-header{margin-bottom:56px}

/* ─── Widget ─── */
.dg-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 60px;align-items:start;
  font-family:var(--sans,'DM Sans',system-ui,sans-serif);color:var(--ink-mid,#44484f);
}
.dg-summary,.dg-list{grid-column:1}
.dg-formwrap{grid-column:2;grid-row:1 / span 2;align-self:start}

/* Điểm tổng hợp */
.dg-summary{display:flex;gap:26px;align-items:center;padding:0 0 28px;border-bottom:1px solid var(--rule,#d4d8df)}
.dg-score{font-family:var(--serif,'Cormorant Garamond',Cambria,serif);font-size:72px;font-weight:300;line-height:1;color:var(--ink,#111318);letter-spacing:-.02em}
.dg-score span{font-family:var(--sans,sans-serif);font-size:14px;color:var(--ink-light,#8a8f99);font-weight:400;letter-spacing:0;margin-left:4px}
.dg-stars{color:var(--gold,#c9a96e);font-size:18px;letter-spacing:3px}
.dg-count{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-light,#8a8f99);margin-top:8px}

/* Chưa có đánh giá */
.dg-loading,.dg-noempty{
  padding:22px 24px;border:1px dashed var(--rule,#d4d8df);background:var(--bg,#f0f2f4);
  font-size:13px;line-height:1.8;color:var(--ink-mid,#44484f);
}
.dg-noempty b{font-family:var(--serif,'Cormorant Garamond',Cambria,serif);font-size:22px;font-weight:400;color:var(--ink,#111318);letter-spacing:-.01em}
.dg-summary:has(.dg-noempty){display:block;padding:0;border:0}

/* Danh sách đánh giá */
.dg-list{margin:0}
.dg-item{padding:22px 0;border-bottom:1px solid var(--rule,#d4d8df)}
.dg-itemhead{display:flex;align-items:center;gap:12px}
.dg-itemname{margin-top:8px;font-size:13px;font-weight:500;color:var(--ink,#111318);letter-spacing:.01em}
.dg-date{font-weight:400;color:var(--ink-light,#8a8f99);font-size:11px;letter-spacing:.06em}
.dg-itembody{margin-top:8px;font-size:13px;line-height:1.85;color:var(--ink-mid,#44484f);white-space:pre-wrap}

/* Form viết đánh giá */
.dg-formwrap{border:1px solid var(--rule,#d4d8df);background:var(--bg,#f0f2f4);padding:34px 32px}
.dg-h{font-family:var(--serif,'Cormorant Garamond',Cambria,serif);font-size:30px;font-weight:300;line-height:1.1;color:var(--ink,#111318);margin:0 0 20px;letter-spacing:-.01em}
.dg-label{display:block;margin:16px 0 0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-light,#8a8f99)}
.dg-label input[type=text],.dg-label textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:12px 14px;
  border:1px solid var(--rule,#d4d8df);border-radius:0;background:var(--bg-panel,#fff);
  font:400 14px/1.6 var(--sans,'DM Sans',system-ui,sans-serif);letter-spacing:0;text-transform:none;color:var(--ink,#111318);
  transition:border-color .2s,box-shadow .2s;
}
.dg-label input[type=text]:focus,.dg-label textarea:focus{outline:0;border-color:var(--accent,#034AA6);box-shadow:0 0 0 3px rgba(3,74,166,.1)}
.dg-label textarea{resize:vertical;min-height:110px}
.dg-label br{display:none}

/* Chấm sao */
.dg-stars-input{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.dg-stars-input label{cursor:pointer}
.dg-stars-input input{position:absolute;opacity:0;pointer-events:none}
.dg-stars-input span{
  display:inline-block;min-width:52px;text-align:center;padding:9px 12px;
  border:1px solid var(--rule,#d4d8df);background:var(--bg-panel,#fff);
  font-size:13px;color:var(--ink-light,#8a8f99);letter-spacing:.04em;transition:all .2s;
}
.dg-stars-input label:hover span{border-color:var(--accent,#034AA6);color:var(--accent,#034AA6)}
.dg-stars-input input:checked+span{background:var(--accent,#034AA6);border-color:var(--accent,#034AA6);color:#fff;font-weight:500}
.dg-stars-input input:focus-visible+span{outline:2px solid var(--accent2,#048ABF);outline-offset:2px}

/* Nút gửi */
.dg-btn{
  margin-top:22px;padding:15px 34px;border:0;border-radius:0;cursor:pointer;
  background:var(--accent,#034AA6);color:#fff;
  font:500 10.5px/1 var(--sans,'DM Sans',system-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s;
}
.dg-btn:hover{background:var(--accent2,#048ABF)}
.dg-btn:disabled{opacity:.6;cursor:wait}
.dg-note{margin:14px 0 0;font-size:11px;line-height:1.7;color:var(--ink-light,#8a8f99)}
.dg-msg{margin:16px 0 0;padding:12px 14px;font-size:13px;line-height:1.7;border-left:3px solid}
.dg-ok{background:#eef6ee;color:#1f6b33;border-color:#2e8b4a}
.dg-err{background:#fbeeee;color:#a31b1b;border-color:#c0392b}

/* Bẫy chống bot (ẩn với người dùng) */
.dg-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ─── Responsive ─── */
@media (max-width:1100px){
  .dg-wrap{grid-template-columns:1fr}
  .dg-summary,.dg-list,.dg-formwrap{grid-column:1}
  .dg-formwrap{grid-row:auto;margin-top:40px}
}
@media (max-width:768px){
  .section-reviews{padding:70px 20px}
  .section-reviews .section-header{margin-bottom:36px;flex-direction:column;gap:14px}
  .section-reviews .section-desc{max-width:none;padding-top:0}
  .dg-score{font-size:56px}
  .dg-formwrap{padding:26px 20px}
}

/* ─── Biến thể cho template kính mờ (style-product.css, nền tối) ───
   Bọc widget trong phần tử có class "dg-theme-glass". */
.dg-theme-glass .dg-wrap{font-family:inherit;color:rgba(255,255,255,.82)}
.dg-theme-glass .dg-summary{border-bottom-color:rgba(255,255,255,.18)}
.dg-theme-glass .dg-score{font-family:inherit;font-weight:800;font-size:60px;color:#fff;letter-spacing:-.03em}
.dg-theme-glass .dg-score span,.dg-theme-glass .dg-count,.dg-theme-glass .dg-date,.dg-theme-glass .dg-note,.dg-theme-glass .dg-label{color:rgba(255,255,255,.6)}
.dg-theme-glass .dg-stars{color:#fbbf24}
.dg-theme-glass .dg-loading,.dg-theme-glass .dg-noempty{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.82);border-radius:12px}
.dg-theme-glass .dg-noempty b{font-family:inherit;font-size:18px;font-weight:700;color:#fff}
.dg-theme-glass .dg-item{border-bottom-color:rgba(255,255,255,.14)}
.dg-theme-glass .dg-itemname{color:#fff}
.dg-theme-glass .dg-itembody{color:rgba(255,255,255,.82)}
.dg-theme-glass .dg-formwrap{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.2);border-radius:16px}
.dg-theme-glass .dg-h{font-family:inherit;font-size:22px;font-weight:700;color:#fff}
.dg-theme-glass .dg-label input[type=text],.dg-theme-glass .dg-label textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);border-radius:10px;color:#fff;font-family:inherit}
.dg-theme-glass .dg-label input::placeholder,.dg-theme-glass .dg-label textarea::placeholder{color:rgba(255,255,255,.45)}
.dg-theme-glass .dg-label input[type=text]:focus,.dg-theme-glass .dg-label textarea:focus{border-color:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.dg-theme-glass .dg-stars-input span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7);border-radius:8px}
.dg-theme-glass .dg-stars-input label:hover span{border-color:#4ade80;color:#4ade80}
.dg-theme-glass .dg-stars-input input:checked+span{background:#22c55e;border-color:#22c55e;color:#06210f;font-weight:700}
.dg-theme-glass .dg-btn{background:#22c55e;color:#06210f;border-radius:10px;font-family:inherit;font-weight:700;letter-spacing:.12em}
.dg-theme-glass .dg-btn:hover{background:#4ade80}
@media (max-width:768px){.dg-theme-glass .dg-score{font-size:48px}}