/* ============================================================
   PHONG THỦY MÀU XE — ptmx.css
   Plugin stylesheet — tách biệt hoàn toàn khỏi theme
   ============================================================ */

/* --- Google Font --- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

/* --- CSS Variables --- */
.ptmx-wrap {
    --ptmx-font:        'Be Vietnam Pro', -apple-system, sans-serif;
    --ptmx-orange:      #E67E22;
    --ptmx-orange-dark: #D35400;
    --ptmx-green-bg:    #EAF7EF;
    --ptmx-green-text:  #1D8348;
    --ptmx-blue-bg:     #EBF5FB;
    --ptmx-blue-text:   #1A5276;
    --ptmx-red-bg:      #FDEDEC;
    --ptmx-red-text:    #A93226;
    --ptmx-gray-bg:     #F8F9FA;
    --ptmx-border:      #EDEDED;
    --ptmx-text:        #1A1A1A;
    --ptmx-text-muted:  #888888;
    --ptmx-radius-sm:   6px;
    --ptmx-radius-md:   10px;
    --ptmx-radius-lg:   14px;
    --ptmx-shadow:      0 2px 12px rgba(0,0,0,.06);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.ptmx-wrap {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--ptmx-font);
    font-size: 15px;
    color: var(--ptmx-text);
    line-height: 1.6;
    border: 1px solid var(--ptmx-border);
    border-radius: var(--ptmx-radius-lg);
    overflow: hidden;
    box-shadow: var(--ptmx-shadow);
    background: #fff;
}

.ptmx-card {
    background: #fff;
    border: 1px solid var(--ptmx-border);
    border-radius: var(--ptmx-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--ptmx-shadow);
}

.ptmx-form-card {
    padding: 1.25rem 1.5rem;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.ptmx-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    margin: 0;
    padding: 16px 24px;
    background: linear-gradient(90deg, #03843b, #0e1ac5);
    color: #fff;
    border-radius: 0;
}

.ptmx-bagua-icon {
    flex-shrink: 0;
    animation: ptmx-spin-slow 8s linear infinite;
}

@keyframes ptmx-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ptmx-sec-label {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: -1rem -1.25rem 14px -1.25rem;
    padding: 8px 16px;
    background: linear-gradient(90deg, #03843b, #0e1ac5);
    border-radius: 0;
}

.ptmx-hint {
    font-size: 12px;
    color: var(--ptmx-text-muted);
    margin: -4px 0 12px;
}

/* ============================================================
   TAB CHỌN LOẠI LỊCH
   ============================================================ */
.ptmx-tab-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.ptmx-tab {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ptmx-font);
    cursor: pointer;
    border: 1px solid var(--ptmx-border);
    background: transparent;
    color: var(--ptmx-text-muted);
    transition: all .15s ease;
}

.ptmx-tab:hover {
    border-color: #bbb;
    color: var(--ptmx-text);
}

.ptmx-tab-active {
    background: var(--ptmx-blue-bg);
    color: var(--ptmx-blue-text);
    border-color: #AED6F1;
    font-weight: 600;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.ptmx-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.ptmx-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

.ptmx-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ptmx-text-muted);
    margin-bottom: 6px;
}

.ptmx-field input[type="number"],
.ptmx-field input[type="text"],
.ptmx-field input[type="tel"],
.ptmx-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ptmx-border);
    border-radius: var(--ptmx-radius-md);
    font-size: 14px;
    font-family: var(--ptmx-font);
    color: var(--ptmx-text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ptmx-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.ptmx-field input:focus,
.ptmx-field select:focus {
    outline: none;
    border-color: var(--ptmx-orange);
    box-shadow: 0 0 0 3px rgba(230,126,34,.12);
}

.ptmx-field input::placeholder {
    color: #C5C5C5;
}

.ptmx-required {
    color: #E74C3C;
    font-size: 13px;
}

/* ============================================================
   NÚT BẤM
   ============================================================ */
.ptmx-btn-main {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--ptmx-font);
    letter-spacing: .02em;
    cursor: pointer;
    border-radius: var(--ptmx-radius-md);
    background: linear-gradient(90deg, #8000ff, #59e4ec);
    border: none;
    color: #fff;
    margin-top: 6px;
    transition: opacity .15s ease, transform .1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ptmx-btn-main:hover {
    opacity: .88;
}

.ptmx-btn-main:active {
    transform: scale(.99);
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
#ptmx-loading {
    text-align: center;
    padding: 1.5rem;
    color: var(--ptmx-text-muted);
    font-size: 14px;
}

.ptmx-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ptmx-border);
    border-top-color: var(--ptmx-orange);
    border-radius: 50%;
    animation: ptmx-spin .8s linear infinite;
    margin: 0 auto 10px;
}

@keyframes ptmx-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BÁT TỰ — BẢNG THÔNG TIN
   ============================================================ */
.ptmx-tru-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ptmx-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 0 4px;
}

.ptmx-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ptmx-border);
    font-size: 14px;
    gap: 12px;
}

.ptmx-info-row:last-child {
    border-bottom: none;
}

.ptmx-info-label {
    color: var(--ptmx-text-muted);
    flex-shrink: 0;
}

.ptmx-info-value {
    font-weight: 600;
    text-align: right;
    color: var(--ptmx-text);
}

/* ============================================================
   BẢNG MÀU XE
   ============================================================ */
.ptmx-mau-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--ptmx-border);
}

.ptmx-mau-row:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.ptmx-mau-info {
    width: 100%;
}

.ptmx-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    letter-spacing: .02em;
}

.ptmx-badge-green { background: var(--ptmx-green-bg); color: var(--ptmx-green-text); }
.ptmx-badge-blue  { background: var(--ptmx-blue-bg);  color: var(--ptmx-blue-text);  }
.ptmx-badge-red   { background: var(--ptmx-red-bg);   color: var(--ptmx-red-text);   }

.ptmx-mau-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ptmx-text);
    line-height: 1.4;
}

.ptmx-mau-sub {
    font-size: 13px;
    color: var(--ptmx-text-muted);
    margin-top: 4px;
    line-height: 1.55;
}

/* Dòng cảm ơn */
.ptmx-cam-on {
    font-size: 14px;
    color: var(--ptmx-text);
    line-height: 1.6;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ptmx-border);
}

.ptmx-cam-on strong {
    font-weight: 700;
    color: var(--ptmx-text);
}

/* Header nhóm màu: badge + sao nằm ngang cùng hàng */
.ptmx-mau-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Sao đánh giá — nằm ngang */
.ptmx-stars {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.ptmx-star-on,
.ptmx-star-off {
    font-size: 20px;
    line-height: 1;
}

.ptmx-star-on  { color: #FF8300; }
.ptmx-star-off { color: #E0E0E0; }

/* Wrapper bảng màu */
.ptmx-dots-wrap {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Từng ô màu + tên */
.ptmx-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ptmx-dot {
    width: 36px;
    height: 36px;
    border-radius: var(--ptmx-radius-sm);
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
    transition: transform .15s ease;
    cursor: default;
}

.ptmx-dot:hover {
    transform: scale(1.12);
    border-color: rgba(0,0,0,.2);
}

.ptmx-dot-label {
    font-size: 11px;
    color: var(--ptmx-text-muted);
    text-align: center;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   GỢI Ý MÀU XE
   ============================================================ */
.ptmx-goiy-header {
    margin-bottom: 8px;
}

.ptmx-goiy-xe-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ptmx-goiy-mau-list {
    margin-bottom: 14px;
}

.ptmx-goiy-label {
    font-size: 12px;
    color: var(--ptmx-text-muted);
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ptmx-goiy-xe-ten {
    font-size: 15px;
    font-weight: 600;
    color: var(--ptmx-text);
}

.ptmx-xe-mau-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ptmx-xe-mau-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--ptmx-gray-bg);
    border: 0.5px solid var(--ptmx-border);
    border-radius: 20px;
    padding: 5px 10px 5px 5px;
}

.ptmx-xe-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}

.ptmx-xe-mau-ten {
    font-size: 13px;
    color: var(--ptmx-text);
    font-weight: 500;
}

.ptmx-goiy-divider {
    border: none;
    border-top: 2px solid var(--ptmx-border);
    margin: 14px 0;
}

/* Dòng tiêu đề gợi ý — nổi bật */
.ptmx-goiy-sub-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ptmx-text);
    background: var(--ptmx-gray-bg);
    border-left: 3px solid #8000ff;
    border-radius: 0 var(--ptmx-radius-sm) var(--ptmx-radius-sm) 0;
    padding: 8px 12px;
    margin-bottom: 4px;
}

/* Sao trong gợi ý màu xe — desktop bên phải, mobile inline badge */
.ptmx-stars-right  { display: flex; flex-shrink: 0; }
.ptmx-stars-inline { display: none; }
.ptmx-goiy-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.ptmx-goiy-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.ptmx-goiy-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ptmx-text);
}

.ptmx-goiy-mota {
    font-size: 12px;
    color: var(--ptmx-text-muted);
    margin-top: 2px;
}

.ptmx-badge-warn { background: #FEF9E7; color: #9A7D0A; }
.ptmx-badge-gray { background: #F2F3F4; color: #717D7E; }
.ptmx-field-full select { width: 100%; }

/* Xe phù hợp mệnh */
.ptmx-xe-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}

.ptmx-xe-thumb-wrap { flex-shrink: 0; }

.ptmx-xe-thumb {
    width: 90px;
    height: 65px;
    object-fit: cover;
    border-radius: var(--ptmx-radius-md);
    border: 1px solid var(--ptmx-border);
}

.ptmx-xe-thumb-empty {
    width: 90px;
    height: 65px;
    background: var(--ptmx-gray-bg);
    border-radius: var(--ptmx-radius-md);
    border: 1px solid var(--ptmx-border);
}

.ptmx-xe-info { flex: 1; min-width: 0; }

.ptmx-xe-ten {
    font-size: 14px;
    font-weight: 600;
    color: var(--ptmx-text);
    margin-bottom: 6px;
}

.ptmx-xe-mau-phu-hop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}

.ptmx-xe-gia {
    font-size: 13px;
    color: #C0392B;
    font-weight: 600;
}

.ptmx-btn-xem-xe {
    flex-shrink: 0;
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(90deg, #03843b, #0e1ac5);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .15s;
}

.ptmx-btn-xem-xe:hover { opacity: .85; }

/* ============================================================
   LƯU Ý CUỐI
   ============================================================ */
.ptmx-note {
    background: var(--ptmx-gray-bg);
    border: 1px solid var(--ptmx-border);
    border-left: 3px solid var(--ptmx-orange);
    border-radius: 0 var(--ptmx-radius-md) var(--ptmx-radius-md) 0;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--ptmx-text-muted);
    line-height: 1.65;
    margin-bottom: 1rem;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 600px) {

    /* Wrap & card */
    .ptmx-wrap {
        border-radius: 10px;
        margin: 0 4px;
    }
    .ptmx-card {
        padding: .9rem 1rem;
        border-radius: var(--ptmx-radius-md);
    }
    .ptmx-form-card {
        padding: 1rem;
    }

    /* Tiêu đề */
    .ptmx-title {
        font-size: .85rem;
        padding: 13px 16px;
        letter-spacing: .05em;
    }

    /* Tab dương/âm */
    .ptmx-tab-row {
        gap: 6px;
    }
    .ptmx-tab {
        font-size: 13px;
        padding: 7px 14px;
    }

    /* Row ngày/tháng/năm — giữ 3 cột ngang trên mobile */
    .ptmx-row3 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    .ptmx-row3 .ptmx-field label {
        font-size: 11px;
    }
    .ptmx-row3 input[type=number] {
        font-size: 14px;
        padding: 7px 6px;
    }

    /* Row 2 cột → 1 cột */
    .ptmx-row2 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Input + select */
    .ptmx-field label {
        font-size: 12px;
    }
    .ptmx-field input,
    .ptmx-field select {
        font-size: 14px;
        padding: 8px 10px;
    }

    /* Nút tra cứu */
    .ptmx-btn-main {
        font-size: 13px;
        padding: 12px;
        gap: 6px;
    }
    .ptmx-bagua-icon {
        width: 17px;
        height: 17px;
    }

    /* Sec label */
    .ptmx-sec-label {
        font-size: 11px;
        margin: -.9rem -1rem 12px -1rem;
        padding: 7px 12px;
    }

    /* Bảng bát tự */
    .ptmx-bat-tu-table th,
    .ptmx-bat-tu-table td {
        font-size: 11px;
        padding: 6px 6px;
    }

    /* Sao — nhỏ lại trên mobile */
    .ptmx-star-on,
    .ptmx-star-off {
        font-size: 14px;
    }

    /* Nhóm màu xe */
    .ptmx-mau-row {
        gap: 8px;
    }
    .ptmx-mau-title {
        font-size: 13px;
    }
    .ptmx-mau-sub {
        font-size: 12px;
    }
    .ptmx-dot {
        width: 28px;
        height: 28px;
    }
    .ptmx-dot-label {
        font-size: 10px;
        max-width: 60px;
    }

    /* Gợi ý màu xe cụ thể */
    .ptmx-goiy-row {
        gap: 8px;
        padding: 10px 0;
    }
    .ptmx-stars-right  { display: none; }
    .ptmx-stars-inline { display: flex; }
    .ptmx-goiy-name {
        font-size: 13px;
    }
    .ptmx-goiy-mota {
        font-size: 11px;
    }
    .ptmx-goiy-xe-ten {
        font-size: 13px;
    }
    .ptmx-xe-mau-item {
        padding: 4px 8px 4px 4px;
    }
    .ptmx-xe-dot {
        width: 18px;
        height: 18px;
    }
    .ptmx-xe-mau-ten {
        font-size: 12px;
    }
    .ptmx-goiy-sub-title {
        font-size: 12px;
        padding: 7px 10px;
    }

    /* Xe phù hợp mệnh */
    .ptmx-xe-item {
        gap: 10px;
        padding: 10px 0;
    }
    .ptmx-xe-thumb {
        width: 72px;
        height: 52px;
    }
    .ptmx-xe-thumb-empty {
        width: 72px;
        height: 52px;
    }
    .ptmx-xe-ten {
        font-size: 13px;
        margin-bottom: 4px;
    }
    .ptmx-xe-gia {
        font-size: 12px;
    }
    .ptmx-btn-xem-xe {
        padding: 6px 12px;
        font-size: 12px;
        flex-shrink: 0;
    }

    /* Lưu ý */
    .ptmx-note {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* Cảm ơn */
    .ptmx-cam-on {
        font-size: 12.5px;
        line-height: 1.6;
    }

    /* PDF button */
    .ptmx-pdf-btn {
        font-size: 13px;
        padding: 10px 20px;
    }

    /* Dropdown chọn xe */
    .ptmx-field-full select {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .ptmx-row3 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
    }
    .ptmx-row3 input[type=number] {
        font-size: 13px;
        padding: 6px 4px;
    }
    .ptmx-title {
        font-size: .78rem;
        padding: 11px 12px;
    }
    .ptmx-star-on,
    .ptmx-star-off {
        font-size: 12px;
    }
}

/* ============================================================
   NÚT XUẤT PDF
   ============================================================ */
.ptmx-pdf-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(90deg, #03843b, #0e1ac5);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--ptmx-font);
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
    margin: 8px auto;
}
.ptmx-pdf-btn:hover  { opacity: .88; }
.ptmx-pdf-btn:active { transform: scale(.98); }
.ptmx-pdf-btn:disabled { opacity: .6; cursor: wait; }

/* ============================================================
   SHORTCODE BẢNG MÀU [bang_mau_phong_thuy]
   ============================================================ */
.ptmx-bang-mau-wrap .ptmx-title {
    margin-bottom: 0;
}

.ptmx-bang-mau-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ptmx-hanh-section {}

.ptmx-hanh-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 12px;
    background: var(--ptmx-gray-bg);
    border-radius: 0 var(--ptmx-radius-sm) var(--ptmx-radius-sm) 0;
    margin-bottom: 10px;
}

.ptmx-hanh-name {
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.ptmx-hanh-mota {
    font-size: 12px;
    color: var(--ptmx-text-muted);
}

.ptmx-mau-grid {
    display: grid;
    gap: 10px;
}

.ptmx-mau-cell {
    border-radius: var(--ptmx-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: flex-end;
    transition: transform .15s, box-shadow .15s;
    cursor: default;
}

.ptmx-mau-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.ptmx-mau-cell-inner {
    width: 100%;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ptmx-mau-cell-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.ptmx-mau-cell-hex {
    font-size: 10px;
    font-family: monospace;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

@media (max-width: 600px) {
    .ptmx-mau-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }
    .ptmx-bang-mau-body {
        padding: .75rem .9rem;
        gap: 16px;
    }
    .ptmx-mau-cell-name { font-size: 11px; }
    .ptmx-mau-cell-hex  { font-size: 9px; }
}

/* ============================================================
   SHORTCODE MÀU XE SẢN PHẨM [mau_xe_san_pham]
   ============================================================ */
.ptmx-mxsp-wrap {
    margin: 12px 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.ptmx-mxsp-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 10px 16px;
    margin: 0;
    background: linear-gradient(90deg, #03843b, #0e1ac5);
}

.ptmx-mxsp-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
}

.ptmx-mxsp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
}

.ptmx-mxsp-swatch-wrap {
    position: relative;
}

.ptmx-mxsp-swatch {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    overflow: hidden;
    position: relative;
    transition: transform .15s, box-shadow .15s;
}

.ptmx-mxsp-item:hover .ptmx-mxsp-swatch {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* Màu phụ — góc dưới phải tam giác */
.ptmx-mxsp-swatch-phu {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 22px 22px;
    border-color: transparent transparent var(--phu-color, #ccc) transparent;
}

.ptmx-mxsp-name {
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    text-align: center;
    max-width: 60px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ptmx-mxsp-hex {
    font-size: 9.5px;
    font-family: monospace;
    color: #94a3b8;
    text-align: center;
}

@media (max-width: 600px) {
    .ptmx-mxsp-swatch {
        width: 44px;
        height: 44px;
    }
    .ptmx-mxsp-name { font-size: 10px; max-width: 50px; }
}