.color-selector-page .product-preview{margin-bottom:20px}
.color-selector-page .product.masks{position:relative}
.color-selector-page .product.masks .preview-base{width:100%;height:auto;display:block}
.color-selector-page .product.masks .mask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:.9;
  pointer-events:none;
  background-size:100% 100%;
}
.color-selector-page .product.masks .mask-full{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  background-size:100% 100%;
}
.color-selector-page .imagewarning{display:block;margin-top:8px;color:#666;font-size:12px}
.color-selector-page .controls{background:#fff;border:1px solid #eee;border-radius:6px;padding:16px}
.color-selector-page .mode-switch{display:flex;gap:16px;margin-bottom:12px}
.color-selector-page .selected-color{margin:10px 0}
.color-selector-page .selected-color input{width:140px}
.color-selector-page .swatch-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.color-selector-page .swatch{width:28px;height:28px;border-radius:4px;border:1px solid #ddd;cursor:pointer;outline:none;position:relative;overflow:hidden}
.color-selector-page .swatch:focus{box-shadow:0 0 0 3px rgba(0,123,255,.25)}
.color-selector-page .swatch:hover{transform:scale(1.1);transition:transform 0.2s}
.color-selector-page .panel{margin-top:12px}

/* Pattern Styles */
.color-selector-page .swatch-pattern-solid{background-size:100% 100%}

/* Texture / Vân Pattern */
.color-selector-page .swatch-pattern-texture::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  opacity:0.4;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* Gradient / Loang Pattern */
.color-selector-page .swatch-pattern-gradient::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 30%, rgba(0,0,0,0.1) 70%, rgba(255,255,255,0.15) 100%);
  pointer-events:none;
}

.color-selector-page .swatch-pattern-gradient::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%);
  pointer-events:none;
}

/* Pattern Styles cho mask và mask-full (Preview) */
.color-selector-page .mask.pattern-solid,
.color-selector-page .mask-full.pattern-solid{
  background-image:none;
}

/* Texture Pattern cho Preview */
.color-selector-page .mask.pattern-texture,
.color-selector-page .mask-full.pattern-texture{
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,0.08) 8px, rgba(0,0,0,0.08) 16px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 16px),
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px);
  background-size: 100% 100%;
  mix-blend-mode: multiply;
}

/* Gradient Pattern cho Preview */
.color-selector-page .mask.pattern-gradient,
.color-selector-page .mask-full.pattern-gradient{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 25%, rgba(0,0,0,0.12) 50%, transparent 75%, rgba(255,255,255,0.18) 100%);
  background-size: 100% 100%;
}

.color-selector-page .mask.pattern-gradient::before,
.color-selector-page .mask-full.pattern-gradient::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.35), transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.08), transparent 40%);
  pointer-events:none;
}

/* Page Content Styling */
.color-selector-page .page-content {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    margin-top: 20px;
}

.color-selector-page .entry-content {
    line-height: 1.6;
}

.color-selector-page .entry-content h1,
.color-selector-page .entry-content h2,
.color-selector-page .entry-content h3,
.color-selector-page .entry-content h4,
.color-selector-page .entry-content h5,
.color-selector-page .entry-content h6 {
    margin-top: 0;
    margin-bottom: 15px;
}

.color-selector-page .entry-content p {
    margin-bottom: 15px;
}

.color-selector-page .entry-content ul,
.color-selector-page .entry-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.color-selector-page .entry-content li {
    margin-bottom: 5px;
}

.color-selector-page .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.color-selector-page .entry-content blockquote {
    border-left: 4px solid #c51230;
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #666;
}

.color-selector-page .entry-content .page-links {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 768px) {
    .color-selector-page .large-6 {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .color-selector-page .controls {
        margin-top: 20px;
    }
}