.halinqr-wrap{--b:#e6e8eb;--bg:#fff;--tx:#111827;--muted:#667085;--pri:#1e40af;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);padding:20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.halinqr-title{margin:0 0 10px;font-size: 20px;font-weight: bold;}
.halinqr-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:900px){.halinqr-grid{grid-template-columns:1fr}}
.halinqr-left,.halinqr-right{background:#fff;border:1px solid var(--b);border-radius:16px;padding:16px}
.halinqr-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.halinqr-row.two>div{flex:1 1 220px}
.halinqr-row label{min-width:160px;font-weight:600}
.halinqr-row input[type=text],.halinqr-row input[type=number],.halinqr-row select{flex:1;min-width:220px;border:1px solid var(--b);border-radius:12px;padding:10px 12px}
.halinqr-row input[type=file]{border:1px solid var(--b);border-radius:12px;padding:8px;background:#fff}
.halinqr-btn{border:1px solid var(--b);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer;color: #000;}
.halinqr-btn.primary{background:#f05a25;border-color:#f05a25;color:#fff}
.halinqr-btn.ghost{background:#fff}
.halinqr-btn.mini{padding:6px 10px;border-radius:10px}
.halinqr-row.actions{gap:8px}
#halinqr-ecc,#halinqr-hidebg,#halinqr-corners-square,#halinqr-corners-dot,#halinqr-dots,#halinqr-logo-file{color: #000;}
.halinqr-note{color:var(--muted);font-size:12px;margin-top:4px}
.halinqr-preview{display:grid;place-items:center;border:1px dashed var(--b);border-radius:16px;min-height:420px}
#halinqr-canvas{width:100%;max-width:520px;height:auto;margin:auto;overflow: auto;}
.halinqr-row.presets span{color:#555;margin-right:6px}
#halinqr-canvas canvas,
#halinqr-canvas svg{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
}
.postdt-share{margin-bottom: 15px;}
/* ===== Mobile tweaks ===== */
@media (max-width: 768px){
  .halinqr-wrap{padding:14px;border-radius:16px}
  .halinqr-title{font-size:20px;margin-bottom:12px}

  /* 1 cột, đưa preview lên trước */
  .halinqr-grid{grid-template-columns:1fr;gap:12px}
  .halinqr-right{order:-1}
  .halinqr-left,.halinqr-right{padding:12px;border-radius:14px}

  /* Label lên 1 dòng, input full width */
  .halinqr-row{margin-bottom:10px}
  .halinqr-row label{min-width:0;width:100%;font-size:14px;margin-bottom:6px}
  .halinqr-row.two>div{flex:1 1 100%}

  /* Tăng kích thước chạm, tránh iOS zoom */
  .halinqr-row input[type=text],
  .halinqr-row input[type=number],
  .halinqr-row select{
    width:100%;
    font-size:16px;           /* ≥16px để iOS không zoom khi focus */
    line-height:1.3;
    padding:11px 12px;
    border-radius:12px;
  }

  /* Ô input màu & file gọn gàng */
  .halinqr-row input[type=color]{width:56px;height:40px;padding:0}
  .halinqr-row input[type=file]{width:100%;font-size:14px;padding:9px}

  /* Hàng nút actions: 2 cột / full width */
  .halinqr-row.actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .halinqr-row.actions .halinqr-btn{width:100%}
  .halinqr-btn{padding:11px 12px;font-size:15px;border-radius:12px}

  /* Preview luôn fit màn */
  .halinqr-preview{min-height:0;padding:10px}
  #halinqr-canvas{max-width:100%;width:100%}
  #halinqr-canvas canvas,
  #halinqr-canvas svg{width:100% !important;height:auto !important;max-width:100% !important}
}

/* iOS/ Safari polish nhỏ */
.halinqr-row input, .halinqr-row select, .halinqr-btn{
  -webkit-appearance:none; appearance:none;
  touch-action:manipulation;
}
/* Hiển thị rõ input màu cả khi chọn #fff (iOS/Safari/Firefox/Chrome) */
.halinqr-row input[type="color"]{
  width:56px; height:40px; padding:0;
  border:1px solid var(--b);            /* khung ngoài */
  border-radius:12px;
  background:#fff; cursor:pointer;
}

/* WebKit (iOS/Safari/Chrome) – thêm viền cho ô màu bên trong */
.halinqr-row input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0; border-radius:10px;
}
.halinqr-row input[type="color"]::-webkit-color-swatch{
  border:1px solid #d0d5dd;             /* viền luôn hiện kể cả màu trắng */
  border-radius:10px;
}

/* Firefox */
.halinqr-row input[type="color"]::-moz-color-swatch{
  border:1px solid #d0d5dd;
  border-radius:10px;
}

/* Trạng thái focus (dễ chạm trên mobile) */
.halinqr-row input[type="color"]:focus{
  outline:2px solid #1e40af33;
  outline-offset:2px;
}