#icp-root{width:100%;}
.icp-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}

.icp-image-wrap{position:relative}
.icp-image-wrap img{width:100%;border-radius:12px;display:block}
.icp-grid h3 {
    font-size: 14px;
    margin-top: 20px;
}
.icp-palette-bar {
    display: flex;
    height: 18px;
    border-radius: 99px;
    overflow: hidden;
    width: 80%;
}
.icp-palette-bar div{height:100%}

.icp-palette-controls {
    display: flex;
    width: 20%;
    gap: 10px;
}
.botimage {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    align-items: center;
}
.icp-palette-controls button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icp-side h3{margin:0 0 12px}
.icp-color-boxes{display:flex;gap:20px;margin-bottom:20px}
.icp-color-box{height:100px;border-radius:8px;}
div#icp-picked {
    width: 60%;
}
div#icp-hover {
    width: 40%;
}
.icp-values div{display:flex;justify-content:space-between;padding:10px;border:1px solid #eee;font-family:monospace;margin-top: 10px;}

.icp-more{margin:15px 0}
.icp-more a{text-decoration:none;font-weight:500}

.uploader{margin-top:12px;padding:20px;background:#efefef;border-radius:10px;}
#icp-loupe{
  position: fixed;
  width: 110px;
  height: 110px;
  border-radius: 14px;
  border: 2px solid #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  pointer-events: none;
  display: none;
  z-index: 999999;
  overflow: hidden;
}

#icp-loupe::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 25% 25%;
}

#icp-loupe span{
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  transform:translate(-50%,-50%);
  border:2px solid red;
}

#icp-loupe span::before,
#icp-loupe span::after{
  content:"";
  position:absolute;
  background:red;
}

#icp-loupe span::before{
  left:50%;
  top:0;
  width:2px;
  height:100%;
  transform:translateX(-50%);
}

#icp-loupe span::after{
  top:50%;
  left:0;
  width:100%;
  height:2px;
  transform:translateY(-50%);
}
#icp-loupe canvas{
  width:100%;
  height:100%;
  image-rendering: pixelated;
}

.copyhemau{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
}

.copyhemau:hover{
  background:#f3f4f6;
}

.copyhemau svg{
  opacity:.6;
}

.copyhemau:hover svg{
  opacity:1;
}

.copyhemau.copied{
  background:#0075db;
}

.copyhemau{
  position:relative;
}

.copyhemau::after{
  content:"Đã copy";
  position:absolute;
  right:10px;
  top:-8px;
  background:#eee;
  color:#333;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:all .2s ease;
  white-space:nowrap;
}

.copyhemau.copied::after{
  opacity:1;
  transform:translateY(-10px);
}
#icp-upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-radius:10px;
  background:#111827;
  color:#fff;
  font-weight:400;
  text-decoration:none;
  cursor:pointer;font-size: 14px;
}

#icp-upload-btn:hover{
  background:#1f2937;
}
.uploader h3 {
    margin-bottom: 10px;
    text-align: center;
}
.icp-upload {
    text-align: center;
}
.imagefot {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.imagefot svg {
    width: 50px;
    height: 20px;
}
p.text-imagefotter {
    font-size: 12px;
}