/**
 * gcc-stickers.css — Lớp trang trí trên thiệp.
 *
 * NẠP Ở CẢ HAI NƠI: trang soạn thiệp (create.html) và trang người nhận mở thiệp
 * (card.html). Phần "hiển thị" phải giống hệt nhau ở hai bên; phần "sửa" chỉ
 * bật lên khi có class gcc-deco-layer--edit.
 */

/* ── Lớp hiển thị (dùng chung) ───────────────────────────────────────────── */

/* Chọn theo CON TRỰC TIẾP của thẻ (đặc hiệu 0,2,0) chứ không chỉ .gcc-deco-layer
   (0,1,0): theme-switcher.css có luật `.gcc-preview-card > *` (0,1,1) đặt
   position:relative cho MỌI con của thẻ. Luật đó thắng, lớp trang trí mất
   absolute nên cao 0 và mọi toạ độ phần trăm tính ra vô nghĩa — đo được: hình
   đặt ở 45% lại rơi xuống 98% chiều cao thẻ. */
.gcc-preview-card > .gcc-deco-layer,
.gcc-preview-wedding-card > .gcc-deco-layer,
.gcc-wedding-card > .gcc-deco-layer,
.gcc-deco-layer {
    position: absolute;
    inset: 0;
    /* KHÔNG bắt chuột ở chế độ xem: người nhận phải bấm được nút, link, nút
       phát nhạc nằm dưới lớp này. Chỉ chế độ sửa mới bật lại. */
    pointer-events: none;
    overflow: hidden;
    /* Nằm trên nội dung thiệp nhưng DƯỚI các lớp phủ của trang (hộp thoại,
       trình chọn ảnh). */
    z-index: 5;
    /* Mốc cho đơn vị cqw của khối chữ: 1cqw = 1% bề rộng lớp này, mà lớp này
       phủ đúng khung thẻ. Nhờ đó cỡ chữ co theo thẻ y như mọi thứ khác — để
       chữ theo pixel thì thiệp trên điện thoại vỡ chữ còn trên máy tính chữ
       bé tí, cùng một bản ghi. Lớp phủ inset:0 nên kích thước luôn xác định,
       container-type không thể sinh vòng lặp bố cục. */
    container-type: size;
}

.gcc-deco {
    position: absolute;
    display: block;
    line-height: 0;
    /* Màu dự phòng khi bản ghi KHÔNG có trường c (dữ liệu cũ, hoặc ghi bằng
       tay). Trùng với màu mặc định của trình sửa — KHÔNG để trắng: thẻ thiệp
       mặc định cũng nền trắng, hình sẽ tàng hình. */
    color: #e0a800;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
    user-select: none;
    -webkit-user-select: none;
}

.gcc-deco svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ── Các loại phần tử của chế độ thiết kế tự do ──────────────────────────── */

/* Khối chữ. line-height ở .gcc-deco là 0 (để SVG không thừa dòng); chữ phải
   đặt lại, nếu không các dòng chồng khít lên nhau. */
.gcc-deco--chu {
    line-height: 1.25;
    white-space: pre-wrap;      /* giữ đúng chỗ người dùng xuống dòng */
    overflow-wrap: break-word;  /* một từ dài không đẩy khối ra ngoài thẻ */
    color: #1a1a1a;             /* chữ mặc định là chữ đọc được, không phải vàng */
    filter: none;               /* bóng đổ của hình dán làm chữ nhoè */
}

.gcc-deco--anh img,
.gcc-deco--video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;          /* lấp đầy khung người dùng kéo ra, không méo */
    border-radius: inherit;
}

.gcc-deco--anh,
.gcc-deco--video { overflow: hidden; }

/* Video phải bấm được nút phát ngay cả ở chế độ XEM, nơi cả lớp đã tắt chuột. */
.gcc-deco--video video { pointer-events: auto; }

/* ── Chế độ sửa ──────────────────────────────────────────────────────────── */

/* Bật lại chuột ở chế độ sửa — PHẢI liệt kê đủ cả bốn dạng chọn như luật tắt
   chuột ở trên. Luật tắt có đặc hiệu 0,2,0 (do phải thắng theme-switcher.css),
   nên một luật 0,1,0 ở đây thua và lớp trang trí không bao giờ bắt được chuột:
   kéo thả chết hoàn toàn mà không có lỗi nào trong console. Đã đo: pointerdown
   không hề tới phần tử. */
.gcc-preview-card > .gcc-deco-layer--edit,
.gcc-preview-wedding-card > .gcc-deco-layer--edit,
.gcc-wedding-card > .gcc-deco-layer--edit,
.gcc-deco-layer--edit { pointer-events: auto; }
.gcc-deco-layer--edit .gcc-deco { cursor: grab; touch-action: none; }
.gcc-deco-layer--edit .gcc-deco:active { cursor: grabbing; }

.gcc-deco-layer--edit .gcc-deco.is-selected {
    outline: 1.5px dashed rgba(255, 255, 255, .9);
    outline-offset: 4px;
}

/* Tay nắm. Kích thước CỐ ĐỊNH theo pixel và bù nghịch phép xoay/lật của hình:
   nếu để chúng thừa hưởng transform của hình thì hình xoay 180° là tay nắm lộn
   ngược, còn hình nhỏ thì tay nắm bé đến mức không bấm trúng. */
.gcc-deco-handle {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #1c1c1e;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    touch-action: none;
}

.gcc-deco-handle:hover { background: #2e2e31; }

/* THANH LỆNH — một hàng nổi phía trên phần tử.
   Bản trước rải nút ra bốn góc, và khi thêm hai nút xếp lớp thì hết chỗ: nút
   nhân bản và nút xuống lớp chồng lên nhau lệch 3px, bấm cái này trúng cái
   kia. Một hàng thì thêm nút là hàng dài ra, không ai tranh chỗ ai. */
.gcc-deco-thanh {
    position: absolute;
    /* Vị trí do js/gcc-stickers.js đo và đặt (left/top theo % của lớp). Không
       neo bằng CSS nữa: thanh nay là con của LỚP chứ không của phần tử, nên nó
       không còn "phía trên phần tử" theo nghĩa CSS. */
    visibility: hidden;         /* hiện sau khi đã đo xong, tránh nháy ở góc */
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(28, 28, 30, .96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
    white-space: nowrap;
    cursor: default;      /* đây là nút bấm, không phải chỗ để kéo */
}

/* Thanh nằm TRÊN mọi phần tử, kể cả phần tử đang chọn. */
.gcc-deco-thanh { z-index: 7; }

.gcc-deco-thanh .gcc-deco-handle {
    position: static;
    width: 24px;
    height: 24px;
    box-shadow: none;
    background: transparent;
}

.gcc-deco-thanh .gcc-deco-handle:hover { background: rgba(255, 255, 255, .16); }

/* Nhãn báo vị trí lớp, hiện thoáng qua sau mỗi lần đổi lớp: khi các phần tử
   không chồng nhau thì đổi thứ tự lớp KHÔNG thay đổi gì trên màn hình, và
   người dùng kết luận nút hỏng — đúng điều đã được báo lại. */
.gcc-deco-lop {
    position: absolute;
    /* left/top do JS đo và đặt. Nhãn nằm trong LỚP chứ không trong phần tử —
       con của phần tử thì thừa hưởng phép lật của nó và chữ hiện ra LỘN NGƯỢC. */
    visibility: hidden;
    z-index: 7;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(28, 28, 30, .92);
    color: #fff;
    font: 600 11px/1.2 system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    animation: gcc-deco-lop-mo 1.1s ease-out forwards;
}

@keyframes gcc-deco-lop-mo {
    0%   { opacity: 0; transform: translate(-50%, -40%); }
    18%  { opacity: 1; transform: translate(-50%, -50%); }
    72%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}

/* Khối chữ đang gõ: bỏ nét đứt chọn (nó nhấp nháy cùng con trỏ gõ, rối mắt) và
   cho phép bôi đen bằng chuột. */
.gcc-deco--dang-sua {
    outline: 2px solid rgba(120, 170, 255, .95);
    outline-offset: 3px;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

/* Chỉ còn tay nắm đổi cỡ nằm ở góc: nó không phải "một lệnh" mà là chỗ để
   KÉO, nên phải nằm đúng trên đường chéo của khung. Mọi lệnh khác đã dời lên
   thanh phía trên. */
.gcc-deco-size { position: absolute; bottom: -11px; right: -11px; cursor: nwse-resize; }

/* ── Bảng chọn hình ──────────────────────────────────────────────────────── */

/* Bảng chọn là một KHỐI TRONG LUỒNG ở cột trái, không phải lớp phủ.
   Bản đầu định vị tuyệt đối phủ đáy khung xem trước — che đúng phần thiệp cần
   trang trí. Nằm trong luồng thì không che gì cả: cột trái là flex dọc nên
   dòng hội thoại tự co lại nhường chỗ. */
.gcc-stk-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Trần theo chiều cao MÀN HÌNH, không theo phần trăm cột: cột trái cao
       100vh nên 46% của nó là gần nửa màn, quá lớn cho một bảng công cụ. */
    max-height: min(46vh, 380px);
    /* Cách hội thoại bên dưới, không dính vào nhau. */
    margin-bottom: 12px;
    /* Thả xuống từ trên: bảng xuất hiện ở đỉnh cột nên chuyển động đi xuống
       mới khớp với chỗ nó đến. Chuyển động ngắn — đây là bảng công cụ mở ra
       liên tục, hoạt cảnh dài sẽ thành phiền. */
    animation: gcc-stk-tha .18s ease-out;
    transform-origin: top center;
    padding: 12px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 16px;
    background: var(--gcc-pnl-bg, #1c1c1e);
    color: var(--gcc-pnl-fg, #ececec);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .4);
}

.gcc-stk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gcc-stk-title { font-size: 13px; font-weight: 600; }

.gcc-stk-search {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 999px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    font: inherit;
    font-size: 13px;
}

.gcc-stk-search:focus { outline: none; border-color: rgba(127, 127, 127, .6); }
/* Nút xoá mặc định của type=search vẽ theo tông sáng của hệ điều hành, trên
   nền tối ra một ô trắng lạc lõng. */
.gcc-stk-search::-webkit-search-cancel-button { filter: invert(.6); }

.gcc-stk-num { opacity: .5; font-size: 11px; }

.gcc-stk-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 0;
    text-align: center;
    font-size: 12px;
    opacity: .55;
}

/* ── Thanh THÊM PHẦN TỬ (chỉ có ở thiệp thiết kế tự do) ─────────────────── */

.gcc-stk-viec {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gcc-stk-them {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 8px;
    background: rgba(127, 127, 127, .1);
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.gcc-stk-them:hover { background: rgba(127, 127, 127, .2); }
.gcc-stk-undo { flex: 0 0 auto; font-weight: 400; opacity: .8; }

/* ── Thuộc tính khối chữ đang chọn ───────────────────────────────────────── */

.gcc-stk-chu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 8px;
}

.gcc-stk-chu-hang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gcc-stk-font {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
}

/* Danh sách xổ ra do hệ vẽ, không thừa hưởng màu nền của bảng — nền trong suốt
   trên nền tối là chữ trắng trên nền trắng, không đọc được dòng nào. */
.gcc-stk-font option { color: #1a1a1a; background: #fff; }

.gcc-stk-cs { flex: 1 1 auto; min-width: 0; }
.gcc-stk-cs-so { flex: 0 0 auto; font-size: 11px; opacity: .7; min-width: 24px; text-align: right; }

.gcc-stk-ca,
.gcc-stk-dm,
.gcc-stk-ng {
    flex: 1 1 auto;
    padding: 6px 0;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.gcc-stk-dm { font-weight: 700; }
.gcc-stk-ng { font-style: italic; }

.gcc-stk-ca.is-active,
.gcc-stk-dm.is-active,
.gcc-stk-ng.is-active { background: rgba(127, 127, 127, .26); }

.gcc-stk-tabs {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.gcc-stk-tabs::-webkit-scrollbar { width: 0; height: 0; }

.gcc-stk-tab {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--gcc-pnl-line, rgba(127, 127, 127, .3));
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.gcc-stk-tab.is-active { background: rgba(127, 127, 127, .26); font-weight: 600; }

.gcc-stk-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
}

.gcc-stk-close:hover { background: rgba(127, 127, 127, .2); }

.gcc-stk-grid {
    /* Lưới hình ăn hết chỗ thừa, các hàng khác giữ nguyên chiều cao. Thiếu cặp
       flex/min-height này thì hàng màu bị bóp còn 6px — đo được ở bản đầu. */
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    overflow-y: auto;
    scrollbar-width: none;
}

.gcc-stk-grid::-webkit-scrollbar { width: 0; height: 0; }

.gcc-stk-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(127, 127, 127, .12);
    color: inherit;
    cursor: pointer;
}

.gcc-stk-item:hover {
    background: rgba(127, 127, 127, .24);
    border-color: rgba(127, 127, 127, .4);
}

/* Hình xem trước trong bảng chọn: bỏ bóng đổ của lớp thật cho nét gọn, và
   không cần cursor kéo vì ở đây chỉ bấm để thêm. */
.gcc-stk-preview { filter: none; cursor: pointer; }

/* Hàng màu */
.gcc-stk-colors {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
}

.gcc-stk-color {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    /* Viền mảnh để ô trắng và ô đen vẫn thấy được rìa trên nền bảng tối/sáng */
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .45);
}

.gcc-stk-color.is-active { border-color: currentColor; }

.gcc-stk-hint { margin: 0; font-size: 11px; opacity: .55; text-align: center; }

@keyframes gcc-stk-tha {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Máy bật "giảm chuyển động" thì bỏ hoạt cảnh, giữ nguyên chức năng. */
@media (prefers-reduced-motion: reduce) {
    .gcc-stk-panel { animation: none; }
}

@media (max-width: 900px) {
    .gcc-stk-panel { max-height: 60%; }
}

/* ── Bố cục mẫu (thiệp thiết kế tự do) ───────────────────────────────────── */

.gcc-stk-mau {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gcc-stk-mau-o {
    flex: 1 1 auto;
    padding: 7px 10px;
    border: 1px dashed var(--gcc-pnl-line, rgba(127, 127, 127, .35));
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.gcc-stk-mau-o:hover { background: rgba(127, 127, 127, .16); border-style: solid; }

/* ── Nền thiệp và màu tự chọn (thiệp thiết kế tự do) ─────────────────────── */

.gcc-stk-nen {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gcc-stk-nen-nhan { font-size: 11px; opacity: .6; margin-right: 2px; }

.gcc-stk-nen-o {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, .45);
    border-radius: 50%;
    cursor: pointer;
}

.gcc-stk-nen-tuchon,
.gcc-stk-mau-tuchon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px dashed rgba(127, 127, 127, .55);
    cursor: pointer;
}

/* Ô chọn màu của hệ vẽ viền và đệm riêng; gỡ hết để nó lấp đúng vòng tròn. */
.gcc-stk-nen-mau,
.gcc-stk-mau-o-tc {
    width: 200%;
    height: 200%;
    margin: -50%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gcc-stk-mo { flex: 1 1 auto; min-width: 0; }
.gcc-stk-mo-so { flex: 0 0 auto; font-size: 11px; opacity: .7; min-width: 34px; text-align: right; }

/* ── Đường gióng và khung khoanh (chỉ ở chế độ sửa) ──────────────────────── */

.gcc-guide {
    position: absolute;
    background: #4aa3ff;
    pointer-events: none;
    z-index: 9;
}

.gcc-guide--doc   { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.gcc-guide--ngang { left: 0; right: 0; height: 1px; margin-top: -.5px; }

.gcc-khoanh {
    position: absolute;
    border: 1px solid rgba(74, 163, 255, .9);
    background: rgba(74, 163, 255, .14);
    pointer-events: none;
    z-index: 8;
}

/* Phần tử phụ trong tập chọn: viền mảnh hơn phần tử CHÍNH, để nhìn ra ngay cái
   nào đang mang tay nắm và cái nào chỉ đi theo. */
.gcc-deco-layer--edit .gcc-deco.is-selected {
    outline: 1.5px dashed rgba(120, 170, 255, .85);
}

.gcc-deco-layer--edit .gcc-deco.is-chinh {
    outline: 1.5px dashed rgba(255, 255, 255, .95);
}

/* ── Danh sách lớp ───────────────────────────────────────────────────────── */

.gcc-stk-lop-hop {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Trần riêng cho danh sách: thiệp hai chục phần tử thì danh sách dài hơn cả
       bảng, và bảng chọn hình bị đẩy khuất. Cuộn trong chính nó.
       200px = vừa đúng sáu dòng; thấp hơn thì thiệp bốn phần tử đã phải cuộn,
       mà cuộn để thấy lớp cuối là mất luôn cái nhìn tổng thể — thứ duy nhất
       bảng này có mà hai nút trên phần tử không có. */
    max-height: 200px;
    overflow-y: auto;
}

/* Tiêu đề mục — dùng chung cho Canvas / Layouts / Shapes / Layers và cho tên
   phần tử đang chọn. Một kiểu duy nhất để bảng đọc ra thành từng khối, thay vì
   một dãy nút trôi liền nhau. */
.gcc-stk-muc {
    font-size: 11px;
    font-weight: 600;
    opacity: .55;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Tên phần tử đang chọn thì KHÔNG viết hoa hết: đó là chữ người dùng gõ, viết
   hoa lên là không còn nhận ra của mình. */
.gcc-stk-muc--pt {
    text-transform: none;
    opacity: .75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcc-stk-lop-tieu {
    position: sticky;
    top: 0;
    padding: 2px 0;
    background: var(--gcc-pnl-bg, #1c1c1e);
}

.gcc-stk-lop-dong {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.gcc-stk-lop-dong.dang {
    border-color: rgba(120, 170, 255, .8);
    background: rgba(120, 170, 255, .12);
}

.gcc-stk-lop-chon {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

/* Ô xem nhỏ: hình thật của phần tử, vẽ bằng chính hàm vẽ của lớp phần tử. */
.gcc-stk-lop-xem {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    color: #e0a800;
}

.gcc-stk-lop-xem svg,
.gcc-stk-lop-xem img { width: 100%; height: 100%; object-fit: contain; }

.gcc-stk-lop-chu { font-size: 14px; font-weight: 700; line-height: 1; }

/* Tay cầm kéo thả. Vùng bấm rộng hơn dấu ⠿ để ngón tay trên điện thoại còn
   bắt được — nhưng vẫn tách khỏi vùng bấm chọn lớp. */
.gcc-stk-lop-cam {
    flex: 0 0 auto;
    width: 20px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .4;
    font-size: 13px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.gcc-stk-lop-cam:active { cursor: grabbing; opacity: .8; }

.gcc-stk-lop-dong.dang-keo {
    opacity: .85;
    border-color: rgba(120, 170, 255, .8);
    background: rgba(120, 170, 255, .16);
}

/* Chấm màu trên nút bố cục = nền của mẫu ấy. */
.gcc-stk-mau-cham {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid rgba(127, 127, 127, .5);
    vertical-align: -1px;
}

/* Tên dài phải cắt bằng dấu ba chấm, không được đẩy hai nút xếp lớp ra ngoài. */
.gcc-stk-lop-ten {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcc-stk-lop-nut {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
}

.gcc-stk-lop-nut:hover:not(:disabled) { background: rgba(127, 127, 127, .24); }
/* Đã ở trên cùng / dưới cùng thì nút mờ đi — bấm mà không có gì xảy ra là thứ
   khiến người dùng tưởng nút hỏng. */
.gcc-stk-lop-nut:disabled { opacity: .25; cursor: default; }
.gcc-stk-lop-nut.xoa:hover { background: rgba(224, 92, 80, .3); }