/* Chấm màu kho sơn.
   2026-08-26: GỠ toàn bộ hiệu ứng vẽ tay (.fx-*, ~300 dòng). Lý do: bản vẽ CSS không
   tả nổi glitter/cat-eye/xà cừ — khách nhìn ra một cục màu phẳng rồi thất vọng khi
   sơn lên. Nay chấm màu là MỘT MIẾNG CẮT từ chính ảnh chai (`swatchImage`), còn dạng
   màu hiện bằng CHỮ (finishLabel). Thêm dạng mới giờ chỉ là thêm một dòng vào
   FINISHES trong polish-finishes.js — không còn khối CSS nào phải nhớ. */

.pol-swatch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--c1, #cccccc);
    border: 2px solid rgba(0, 0, 0, 0.1);
}
.pol-swatch-img { background: var(--c1, #f3f4f6); }
.pol-swatch-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tên dạng màu bằng chữ — thứ DUY NHẤT còn lại để nhận ra dạng, nên phải đọc được
   ở cỡ nhỏ chứ không phải một dòng xám mờ. */
.pol-finish-names {
    font-size: 11px;
    line-height: 1.3;
    color: #4b5563;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Chấm màu 22px: modal hẹn /timeline (.eap-polish-swatch) và modal Gallery /admin
   (.pol-swatch-sm). Cố ý CHUNG một khối chứ không viết khối riêng cho /admin. */
.pol-swatch.eap-polish-swatch,
.pol-swatch.pol-swatch-sm {
    width: 22px; height: 22px;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Chai đã bị xoá khỏi kho — vòng nét đứt, không có màu để vẽ.
   Bộ chọn cố ý gồm CẢ các biến thể kích thước: mọi khối `.pol-swatch.<gì đó>` đều là
   (0,2,0), mà độ đặc hiệu bằng nhau thì THỨ TỰ DÒNG quyết định — một lần sắp xếp lại
   là chấm màu này âm thầm quay về viền trắng đặc. Thêm một class để thắng bất kể chỗ. */
.pol-swatch.pol-swatch-missing,
.pol-swatch.pol-swatch-missing.eap-polish-swatch,
.pol-swatch.pol-swatch-missing.pol-swatch-sm,
.pol-swatch.pol-swatch-missing.pol-swatch-chip,
.pol-swatch.pol-swatch-missing.pol-swatch-hero,
.pol-swatch.pol-swatch-missing.pol-swatch-nail {
    background: transparent;
    border: 2px dashed var(--text-light);
    box-shadow: none;
}

/* ==================================================================
   Ba biến thể kích thước dùng ở hub Edit Polish (/polish). Đặt CHUNG file với
   .pol-swatch: mọi biến thể kích thước phải nằm CẠNH nhau — bãi mìn hoà-độ-đặc-hiệu
   ở file này đã nổ ba lần và chỉ soát được khi mọi khối cùng chỗ.
   ================================================================== */

.finish-chip .pol-swatch.pol-swatch-chip {
    width: 18px; height: 18px;
    border-width: 1px;
}

.pol-preview .pol-swatch.pol-swatch-hero {
    width: 104px; height: 104px;
    border-width: 3px;
}

/* Đầu móng tay giả: bo góc bất đối xứng (đầu tròn, gốc gần vuông).
   Vòm TRÊN phải cao hơn nửa bề rộng mới ra đầu móng; 34% cho ra một cái bia mộ. */
.pol-preview .pol-swatch.pol-swatch-nail {
    width: 56px; height: 78px;
    border-radius: 50% 50% 30% 30% / 60% 60% 14% 14%;
    border-width: 3px;
}