.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    /* BRAND COLOR DEFINITIONS (Chủ đạo: #00b975) */
    --brand-primary: #00b975;
    --brand-primary-hover: #00965e;
    --brand-primary-light: #e6f8f1;
    --brand-primary-rgb: 0, 185, 117;
    /* ERP Layout & Neutral Palette (Slate modern) */
    --erp-bg-app: #eef2f6;
    --erp-bg-card: #f8fafc;
    --erp-bg-surface: #ffffff;
    --erp-primary: var(--brand-primary);
    --erp-secondary: #334155;
    --erp-accent: var(--brand-primary);
    --erp-accent-hover: var(--brand-primary-hover);
    --erp-accent-light: var(--brand-primary-light);
    --erp-border-color: #cbd5e1;
    --erp-border-light: #e2e8f0;
    --erp-text-main: #1e293b;
    --erp-text-muted: #64748b;
    --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --erp-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --erp-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #1e293b;
    font-size: 13px !important;
    margin: 0;
    padding: 0;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.cyber-padding2px {
    padding: 2px;
}

/* ------------------------ css ô nhập liệu --------------------------*/
.cyber-w100 {
    width: 100%;
}

.cyber-flex1 {
    flex: 1;
}

.cyber-flex2 {
    flex: 2;
}

.cyber-upload-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    line-height: 36px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #00b975;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 185, 117, 0.2);
}

    .cyber-upload-btn:hover:not(:disabled) {
        background: #009e63 !important;
        box-shadow: 0 6px 16px rgba(0, 185, 117, 0.3);
        transform: translateY(-1px);
    }

    .cyber-upload-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .cyber-upload-btn:disabled {
        background: #cbd5e1 !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }

.cyber-table-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.cyber-table-row {
    display: flex;
    flex-direction: row;
    /*
        Đây là thuộc tính quan trọng nhất.
        Không đủ chỗ => tự xuống dòng.
    */
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    column-gap: 12px;
    row-gap: 8px;
    align-items: stretch;
    /*
        Không cho chính row tạo scrollbar.
    */
    overflow: visible;
    /*
        Cho phép row nằm trong container nhỏ.
    */
    min-width: 0;
}

    /* Không đặt min-width:0 ở đây - đây từng là nguyên nhân khiến các cột (đặc biệt cột
       "*") bị Grid ép co xuống gần 0px khi cột cố định (VD 200,300) không đủ chỗ, khiến nội
       dung (label, CyberLabelView...) wrap từng chữ rồi tràn/đè chồng lên cột kế bên (ô vẽ
       sau đè lên ô vẽ trước) - nhìn giống hệt hiện tượng "CyberTable che nút/che nội dung
       phía trên". Để mặc định (min-width:auto), cột cố định giữ đúng độ rộng khai báo, cột
       "*" chỉ co tới đúng min-content của nội dung bên trong. */
    .cyber-table-row > * {
        box-sizing: border-box;
        /*
        Không được flex co lại.
    */
        flex-shrink: 0;
        /*
        Không được tự tăng width.
    */
        flex-grow: 0;
        /*
        Rất quan trọng đối với component Blazor.
    */
        min-width: 100px;
    }
    .cyber-table-row > :nth-child(1) {
        flex: 0 0 var(--cyber-col-1);
        width: var(--cyber-col-1);
    }

    .cyber-table-row > :nth-child(2) {
        flex: 0 0 var(--cyber-col-2);
        width: var(--cyber-col-2);
    }

    .cyber-table-row > :nth-child(3) {
        flex: 0 0 var(--cyber-col-3);
        width: var(--cyber-col-3);
    }

    .cyber-table-row > :nth-child(4) {
        flex: 0 0 var(--cyber-col-4);
        width: var(--cyber-col-4);
    }

    .cyber-table-row > :nth-child(5) {
        flex: 0 0 var(--cyber-col-5);
        width: var(--cyber-col-5);
    }

    .cyber-table-row > :nth-child(6) {
        flex: 0 0 var(--cyber-col-6);
        width: var(--cyber-col-6);
    }

    .cyber-table-row > :nth-child(7) {
        flex: 0 0 var(--cyber-col-7);
        width: var(--cyber-col-7);
    }

    .cyber-table-row > :nth-child(8) {
        flex: 0 0 var(--cyber-col-8);
        width: var(--cyber-col-8);
    }

    .cyber-table-row > :nth-child(9) {
        flex: 0 0 var(--cyber-col-9);
        width: var(--cyber-col-9);
    }

    .cyber-table-row > :nth-child(10) {
        flex: 0 0 var(--cyber-col-10);
        width: var(--cyber-col-10);
    }

.cyber-lookup-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.cyber-lookup-label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #333333bd;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cyber-lookup-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.cyber-style-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

    .cyber-style-input:focus-within {
        outline: none;
        border-color: #00b975;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(0, 185, 117, 0.1);
    }

.cyber-style-label {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 6px 6px 8px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.cyber-date-input:focus {
    outline: none;
    border-color: #2684ff;
}

.cyber-date-input {
    outline: none;
    border: none;
    width: 100%;
}
.cyber-popup-footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background-color: var(--erp-bg-card);
    border-top: 1px solid var(--erp-border-light);
}

.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.25;
}

    .btn-modern .material-icons {
        font-size: 18px;
    }

.btn-modern-secondary {
    background-color: var(--erp-bg-surface);
    border-color: var(--erp-border-color);
    color: var(--erp-text-main);
}

    .btn-modern-secondary:hover {
        background-color: #f1f5f9;
        color: var(--brand-primary);
        border-color: var(--brand-primary);
        box-shadow: var(--erp-shadow-sm);
    }

.btn-modern-primary {
    background-color: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(var(--brand-primary-rgb), 0.3);
}

    .btn-modern-primary:hover {
        background-color: var(--brand-primary-hover);
        box-shadow: 0 5px 12px rgba(var(--brand-primary-rgb), 0.4);
        transform: translateY(-1px);
    }

    .btn-modern-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.3);
    }
.cyber-lookup-input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 28px 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.cyber-lookup-value-prefix {
    flex: 0 0 auto;
    margin-right: 6px;
    padding: 6px 6px 6px 8px;
    background: #f0f2f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cyber-lookup-input:focus {
    outline: none;
    border-color: #2684ff;
}

.cyber-lookup-spinner {
    position: absolute;
    right: 8px;
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: #2684ff;
    border-radius: 50%;
    animation: cyber-spin 0.7s linear infinite;
}

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

.cyber-lookup-popup {
    /* position:fixed (thay vì absolute) để sổ xuống thoát khỏi vùng overflow:hidden/auto
       của các control cha (ví dụ ô của CyberGridData) - vị trí thực tế do JS tính lại
       (xem CyberLookup.positionPopup trong cyberjs.js) dựa theo vị trí ô input trên màn hình. */
    position: fixed;
    z-index: 1100;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    /* Chiều rộng tối thiểu (bằng ô input) do JS đặt qua style.minWidth, tự nới rộng theo nội dung bảng */
    width: max-content;
    max-width: 95vw;
    max-height: 260px;
    overflow-y: auto;
}

.cyber-lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .cyber-lookup-table th {
        position: sticky;
        top: 0;
        background: #f5f6f8;
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #e0e0e0;
        font-weight: 600;
        color: black;
    }

    .cyber-lookup-table td {
        padding: 6px 8px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
    }

.cyber-lookup-row {
    cursor: pointer;
}

    .cyber-lookup-row:hover {
        background: #eaf2ff;
    }

    .cyber-lookup-row.active {
        background: #d7e8ff;
    }

.cyber-lookup-state {
    padding: 10px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.cyber-global-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}

    .cyber-global-loading.show {
        display: flex;
    }

    .cyber-global-loading.hide {
        display: none;
    }

.cyber-global-loading-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #ddd;
    border-top-color: #2684ff;
    border-radius: 50%;
    animation: cyber-spin 0.7s linear infinite;
}
/* -------------------------------------------------------------*/





/* ------------------------ CyberPopup --------------------------*/

.cyber-popup-modal {
    transition: opacity 0.25s ease;
    opacity: 1;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.cyber-modal-hide {
    opacity: 0;
    pointer-events: none;
}

.cyber-modal-show {
    opacity: 1;
}

/*
.cyber-popup-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}*/

.cyber-popup-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1001;
    transition: all 0.25s ease;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Giới hạn theo viewport để popup không tràn màn hình khi nội dung dài
       (kể cả lúc chưa resize) - phần thân sẽ tự cuộn thay vì đẩy footer/độ
       cao popup vượt quá màn hình. */
    max-height: 90vh;
}

    /* Header/footer luôn giữ nguyên chiều cao, phần body giãn/co và tự cuộn để
   footer luôn ghim ở đáy popup - đặc biệt quan trọng khi popup bị resize
   (CyberIsResize) nhỏ hơn chiều cao nội dung. */
    .cyber-popup-container > .cyber-popup-header {
        flex: 0 0 auto;
    }

    .cyber-popup-container > .cyber-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        margin-bottom: 10px;
        padding: 1px;
    }

    .cyber-popup-container > .cyber-popup-footer {
        flex: 0 0 auto;
    }

.cyber-popup-header-movable {
    cursor: move;
    user-select: none;
}

.cyber-popup-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 0%, transparent 45%, #999 45%, #999 55%, transparent 55%, transparent 60%, #999 60%, #999 70%, transparent 70%, transparent 75%, #999 75%, #999 85%, transparent 85%);
}

/* Zoom */
.cyber-anim-zoom.cyber-popup-hide {
    transform: translate(-50%,-50%) scale(0.7);
    opacity: 0;
}

.cyber-anim-zoom.cyber-popup-show {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}

/* Fade */
.cyber-anim-fade.cyber-popup-hide {
    opacity: 0;
}

.cyber-anim-fade.cyber-popup-show {
    opacity: 1;
}

/* SlideDown */
.cyber-anim-slidedown.cyber-popup-hide {
    transform: translate(-50%,-70%);
    opacity: 0;
}

.cyber-anim-slidedown.cyber-popup-show {
    transform: translate(-50%,-50%);
    opacity: 1;
}

.cyber-popup-close-btn {
    cursor: pointer;
    user-select: none;
    /*position: absolute;*/
    /*right: 0px;
    top: -8px;*/
    font-size: 20px;
}
/* CyberMsgBox */
.cyber-msgbox-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 40px;
}

.cyber-msgbox-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.cyber-msgbox-content {
    flex: 1 1 auto;
    white-space: pre-line;
    word-break: break-word;
    padding-top: 4px;
}

.cyber-msgbox-info .cyber-msgbox-icon {
    background: #2196f3;
}

.cyber-msgbox-success .cyber-msgbox-icon {
    background: #4caf50;
}

.cyber-msgbox-warning .cyber-msgbox-icon {
    background: #ff9800;
}

.cyber-msgbox-error .cyber-msgbox-icon {
    background: #f44336;
}

.cyber-msgbox-question .cyber-msgbox-icon {
    background: #9c27b0;
}

.cyber-msgbox-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cyber-msgbox-btn {
    min-width: 80px;
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
}

    .cyber-msgbox-btn:hover {
        filter: brightness(0.95);
    }

.cyber-msgbox-btn-primary {
    background: #2196f3;
    border-color: #2196f3;
    color: #fff;
}
.help-icon {
    z-index: 12;
    width: 34px;
    height: 34px;
    background: #eff6ff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2563eb;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    transition: .2s;
}

.cyber-help-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /*min-width: 260px;
    max-width: 360px;*/
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .2s;
    z-index: 20;
    user-select: none;
}

.help-container {
    position: relative;
    z-index: 12;
}

    .help-container:focus-within .cyber-help-popup,
    .help-container:hover .cyber-help-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.help-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 6px 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .help-item kbd {
        min-width: fit-content;
        text-align: center;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 12px;
        font-family: inherit;
        font-weight: 600;
        color: #334155;
        flex: 1;
    }

.cyber-help-text {
    flex: 2;
    font-style: italic;
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cyber-help-line {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    background: #e5e7eb;
}
/* -------------------------------------------------------------*/
/* ------------------------ CyberOTP --------------------------*/
.otp-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.otp-input {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px #00d287;
    }
/* -----------------------------------------------------------*/




/* ------------------------ cyber upload file --------------------------*/
.cyber-upload-label {
    margin-bottom: 8px;
    font-weight: 600;
}

.cyber-upload-box {
    border: 2px dashed #22c55e;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: .2s;
    background: #fcfffd;
}

    .cyber-upload-box:hover {
        background: #f0fdf4;
    }

.cyber-upload-icon {
    font-size: 100px !important;
    color: #2196F3;
}

.cyber-upload-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

.cyber-upload-sub {
    color: #888;
    margin: 10px 0;
}

.cyber-upload-note {
    margin-top: 15px;
    color: #999;
    font-size: 13px;
}

.cyber-file-list-title {
    margin: 10px 0;
    font-weight: bold;
}

.cyber-file-item {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: .2s;
    gap: 5px;
}

    .cyber-file-item:hover {
        background: #f7f7f7;
    }

.cyber-file-icon {
    font-size: 28px;
    width: 45px;
}

.cyber-file-info {
    flex: 1;
}

    .cyber-file-info small {
        color: #888;
    }

.cyber-remove {
    font-weight: 700;
    border: 1px solid #ccc;
    background: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
}

.cyber-upload-box.cyber-dragover {
    border-color: #00e5ff;
    background-color: rgba(0, 229, 255, 0.08);
}

.cyber-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.selected-file-info {
    margin-top: 12px;
    padding: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .selected-file-info .file-name {
        font-weight: 600;
        color: #0f172a;
        word-break: break-all;
    }

    .selected-file-info .file-size {
        color: #94a3b8;
    }

/* PDF */
.cyber-file-icon.pdf {
    background: #ffebee;
    color: #d32f2f;
}

/* Word */
.cyber-file-icon.word {
    background: #e3f2fd;
    color: #1565c0;
}

/* Excel */
.cyber-file-icon.excel {
    background: #e8f5e9;
    color: #2e7d32;
}

/* PowerPoint */
.cyber-file-icon.powerpoint {
    background: #fff3e0;
    color: #ef6c00;
}

/* Image */
.cyber-file-icon.image {
    background: #f3e5f5;
    color: #8e24aa;
}

/* Video */
.cyber-file-icon.video {
    background: #ede7f6;
    color: #5e35b1;
}

/* Audio */
.cyber-file-icon.audio {
    background: #fce4ec;
    color: #c2185b;
}

/* Zip */
.cyber-file-icon.zip {
    background: #eceff1;
    color: #455a64;
}

/* Code */
.cyber-file-icon.code {
    background: #263238;
    color: #fff;
}

/* Mặc định */
.cyber-file-icon.file {
    background: #f5f5f5;
    color: #757575;
}
/* -----------------------------------------------------------*/





/* ------------css của control select-------------------------------*/
.cyber-lookup-chip-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: text;
}

    .cyber-lookup-chip-box:focus-within {
        border-color: #00b975;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(0, 185, 117, 0.1);
    }

.cyber-lookup-input-multi {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    padding: 4px;
    background: transparent;
}

.cyber-lookup-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e8f4ff;
    border: 1px solid #9dcfff;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 13px;
}

.cyber-lookup-chip-remove {
    cursor: pointer;
    font-weight: bold;
}
/* -----------------------------------------------------------*/




/* -----------css control radio button------------------------------*/
.cyber-radio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cyber-radio-label {
    font-size: 13px;
    color: #555;
}

.cyber-radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    position: relative;
}

    .cyber-radio-container input {
        display: none;
    }

.cyber-radio-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #00D287;
    border-radius: 50%;
    position: relative;
    transition: .2s;
    box-sizing: border-box;
}

    .cyber-radio-checkmark::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #00D287;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: .2s;
    }

.cyber-radio-container input:checked + .cyber-radio-checkmark::after {
    transform: translate(-50%,-50%) scale(1);
}

.cyber-radio-container input:disabled + .cyber-radio-checkmark {
    background: #eee;
    border-color: #ccc;
}

.cyber-radio-text {
    font-size: 14px;
}
/* -----------------------------------------------------------*/

/* -----------css control CyberRadioButtonData------------------------------*/
.cyber-radio-data-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.cyber-radio-group {
    display: flex;
    gap: 4px;
}

.cyber-radio-group-vet {
    flex-direction: column;
}

.cyber-radio-group-hoz {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

    .cyber-radio-group-hoz .cyber-radio-wrapper {
        width: auto;
    }
/* -----------------------------------------------------------*/

/* -----------css control segmented------------------------------*/
.cyber-segmented-wrapper {
    background: var(--erp-bg-body, #f8f9fa);
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cyber-segmented-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--erp-text-main, #1f2937);
    white-space: nowrap;
}

.cyber-segmented-control {
    display: inline-flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 6px;
    gap: 2px;
    width: 100%;
    max-width: 260px;
}

.cyber-segmented-option {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--erp-text-muted, #64748b);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

    .cyber-segmented-option.active {
        background-color: #ffffff;
        color: var(--brand-primary, #00D287);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cyber-segmented-option:hover:not(.active):not(.disabled) {
        color: var(--erp-text-main, #1f2937);
    }

    .cyber-segmented-option.disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }
/* -----------------------------------------------------------*/

/* -----------css control dropdown (CyberDropdown/CyberDropdownItem)------------------*/
.cyber-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.cyber-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--erp-text-main, #1f2937);
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .cyber-dropdown-trigger:hover:not(.cyber-dropdown-disabled) {
        border-color: var(--brand-primary, #00D287);
        color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-trigger.cyber-dropdown-trigger-open {
        border-color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-trigger.cyber-dropdown-disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

.cyber-dropdown-trigger-caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.cyber-dropdown-trigger-open .cyber-dropdown-trigger-caret {
    transform: rotate(180deg);
}

.cyber-dropdown-menu {
    position: fixed;
    visibility: hidden;
    background: #fff;
    border: 1px solid var(--erp-border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 6px;
    box-sizing: border-box;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1002;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cyber-dropdown-hide {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.cyber-dropdown-show {
    opacity: 1;
    transform: translateY(0);
}

.cyber-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: black;
    white-space: nowrap;
    user-select: none;
}

    .cyber-dropdown-item:hover:not(.cyber-dropdown-item-disabled) {
        background: var(--erp-bg-body, #f8f9fa);
        color: var(--brand-primary, #00D287);
    }

    .cyber-dropdown-item.cyber-dropdown-item-disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .cyber-dropdown-item .material-icons {
        font-size: 18px !important;
        color: #999;
    }

.cyber-dropdown-item-icon {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
}

.cyber-dropdown-item-label {
    flex: 1 1 auto;
}

.cyber-dropdown-item-shortcut {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--erp-text-muted, #9ca3af);
    margin-left: 12px;
}

.cyber-dropdown-divider {
    height: 1px;
    background: var(--erp-border-color, #e2e8f0);
    margin: 4px 2px;
}
/* -----------------------------------------------------------*/


















/* ------------------------ CyberLogin --------------------------*/
.cyber-login-container {
    height: 100vh;
    display: flex;
    overflow: hidden;
}
.cyber-left-panel {
    flex: 1.2;
    background: linear-gradient(135deg, #0f172a 0%, #0d5c3a 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: white;
    overflow: hidden;
}

    .cyber-left-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 24px 24px;
        opacity: 0.7;
    }

.btn-learn-more {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
}

    .btn-learn-more:hover {
        background: #fff;
        color: #1e293b;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
@media (max-width: 600px) {
    .cyber-login-container {
        display: block !important;
    }

    .cyber-left-panel {
        display: none;
    }
}
@media (max-width:1024px) and (min-height:1024px) {
    .cyber-login-container {
        display: block !important;
    }
    .cyber-left-panel {
        display: none;
    }
    .cyber-right-panel {
        background: linear-gradient(135deg, #0f172a 0%, #0d5c3a 100%) !important;
    }
    .cyber-right-content {
        background: #fff;
        padding: 40px;
        border-radius: 14px;
    }
}
/*--------------------------------------------------------------------*/
.cyber-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 14px;
    background: #f8fafc;
    transition: all 0.2s ease-in-out;
    outline: none;
}

    .cyber-input-group:focus-within {
        border-color: #00b975;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(0, 185, 117, 0.1);
    }

    .cyber-input-group i:first-child {
        color: #94a3b8;
        margin-right: 12px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .cyber-input-group .w3-input {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0;
        flex: 1;
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
    }

        .cyber-input-group .w3-input::placeholder {
            color: #94a3b8;
        }

        .cyber-input-group .w3-input:focus {
            outline: none;
        }

.cyber-login-box {
    width: 100%;
    box-sizing: border-box;
}

    .cyber-login-box select {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

.cyber-toggle-password {
    cursor: pointer;
    color: #94a3b8;
    margin-left: 10px;
    flex-shrink: 0;
    transition: color 0.2s;
}

    .cyber-toggle-password:hover {
        color: #1e293b;
    }
/* -----------------------------------------------------------*/
.cyber-forgot-link {
    color: #00b975;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
}

    .cyber-forgot-link:hover {
        color: #009e63;
        text-decoration: underline;
        cursor: pointer;
    }
/* -----------------------------------------------------------*/
.cyber-login-btn {
    width: 100%;
    height: 48px;
    line-height: 36px;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 185, 117, 0.2);
    margin-top: 20px;
}

    .cyber-login-btn:hover:not(:disabled) {
        background: #009e63 !important;
        box-shadow: 0 6px 16px rgba(0, 185, 117, 0.3);
        transform: translateY(-1px);
    }

    .cyber-login-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .cyber-login-btn:disabled {
        background: #cbd5e1 !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }
/* -----------------------------------------------------------*/
.cyber-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .cyber-divider::before, .cyber-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .cyber-divider:not(:empty)::before {
        margin-right: .5em;
    }

    .cyber-divider:not(:empty)::after {
        margin-left: .5em;
    }

.cyber-social-btn {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s;
}

    .cyber-social-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .cyber-social-btn img {
        flex-shrink: 0;
    }
/* -----------------------------------------------------------*/
/* ------------------------ CyberLangage --------------------------*/
.cyber-lang {
    display: flex;
    justify-content: flex-end;
    user-select: none;
}

.cyber-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

    .cyber-lang-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .cyber-lang-btn img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }
/* --------------------------------------------------------------------------------------------------------------------*/





/* ---------------------mainlayout----------------------------------------------------------------------------------*/
:root {
    --green: #00D287;
    --green-dark: #00A76C;
    --green-tint: #E4FBF1;
    --orange: #FF990A;
    --orange-tint: #FFF1DC;
    --ink: #0E1B17;
    --ink-soft: #4B5A55;
    --line: #E4EAE7;
    --paper: #F4F7F5;
    --card: #FFFFFF;
    --sidebar-bg: #06170F;
    --sidebar-bg-soft: #0C231A;
    --sidebar-line: rgba(255,255,255,0.08);
    --sidebar-text: rgba(255,255,255,0.62);
    --sidebar-text-strong: #ffffff;
    --sidebar-w: 272px;
    --sidebar-w-collapsed: 76px;
    --ease: cubic-bezier(.4,0,.2,1);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cyber-display {
    font-family: 'Manrope', sans-serif;
}

.cyber-mono {
    font-family: 'IBM Plex Mono', monospace;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============ APP SHELL ============ */
.cyber-app {
    display: flex;
    min-height: 100vh;
}

/* ============ SIDEBAR ============ */
/* fixed to the viewport so it never scrolls with the page; only its own
     nav list (overflow-y:auto below) scrolls internally when the menu is long */
.cyber-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-soft) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    transition: width .35s var(--ease);
    z-index: 40;
}

.cyber-app.cyber-collapsed .cyber-sidebar {
    width: var(--sidebar-w-collapsed);
}

.cyber-sidebar__resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
}

    .cyber-sidebar__resize-handle::after {
        content: "";
        position: absolute;
        top: 0;
        right: 2px;
        width: 2px;
        height: 100%;
        background: transparent;
        transition: background .2s var(--ease);
    }

    .cyber-sidebar__resize-handle:hover::after {
        background: var(--green);
    }

.cyber-app.cyber-collapsed .cyber-sidebar__resize-handle {
    display: none;
}

/* Brand row */
.cyber-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--sidebar-line);
    flex-shrink: 0;
}

.cyber-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #04140D;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,210,135,.35);
}

.cyber-brand__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--sidebar-text-strong);
    white-space: nowrap;
    opacity: 1;
    transition: opacity .2s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-brand__name {
    opacity: 0;
    pointer-events: none;
    width: 0;
}

.cyber-app.cyber-collapsed .cyber-sidebar__brand {
    padding: 22px 0;
    justify-content: center;
}

.cyber-app.cyber-collapsed .cyber-brand__mark {
    margin: 0;
}

/* Nav */
.cyber-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 12px 12px;
}

    .cyber-sidebar__nav::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-sidebar__nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 3px;
    }

.cyber-nav-section-label {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.32);
    padding: 14px 12px 8px;
    white-space: nowrap;
    transition: opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-nav-section-label {
    opacity: 0;
    height: 0;
    padding: 6px 0 0;
    overflow: hidden;
}

.cyber-nav-item {
    margin-bottom: 2px;
    position: relative;
}

.cyber-nav-link, .cyber-nav-parent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sidebar-text);
    white-space: nowrap;
    position: relative;
    transition: background .2s var(--ease), color .2s var(--ease);
    cursor: pointer;
}

    .cyber-nav-link:hover, .cyber-nav-parent:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

.cyber-nav-item.cyber-active > .cyber-nav-link {
    background: rgba(0,210,135,.14);
    color: #fff;
}

    .cyber-nav-item.cyber-active > .cyber-nav-link::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        background: var(--green);
        border-radius: 0 3px 3px 0;
        box-shadow: 0 0 10px rgba(0,210,135,.6);
    }

.cyber-nav-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cyber-nav-icon svg {
        width: 100%;
        height: 100%;
    }

    .cyber-nav-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.cyber-nav-label {
    /*flex: 1;*/
    opacity: 1;
    transition: opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-nav-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.cyber-nav-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .25s var(--ease), opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-nav-chevron {
    opacity: 0;
    width: 0;
}

.cyber-nav-item.cyber-open > .cyber-nav-parent .cyber-nav-chevron {
    transform: rotate(90deg);
}

.cyber-nav-badge {
    font-size: 10.5px;
    font-weight: 700;
    background: var(--orange);
    color: #3A2200;
    border-radius: 20px;
    padding: 1px 7px;
    line-height: 1.5;
    transition: opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-nav-badge {
    display: none;
}

/* collapsed tooltip */
.cyber-app.cyber-collapsed .cyber-nav-item > .cyber-nav-link[data-tooltip]:hover::after,
.cyber-app.cyber-collapsed .cyber-nav-item > .cyber-nav-parent[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #10241C;
    color: #fff;
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    z-index: 60;
    pointer-events: none;
}

.cyber-app.cyber-collapsed .cyber-submenu {
    display: none;
}

/* submenu (grid trick for smooth height animation) */
.cyber-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
}

.cyber-nav-item.cyber-open > .cyber-submenu {
    grid-template-rows: 1fr;
}

.cyber-submenu__inner {
    overflow: hidden;
}

    .cyber-submenu__inner ul {
        padding: 2px 0 4px 14px;
        margin-left: 22px;
        border-left: 1px solid var(--sidebar-line);
    }

.cyber-nav-sublink {
    display: block;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sidebar-text);
    transition: background .2s var(--ease), color .2s var(--ease);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

    .cyber-nav-sublink:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .cyber-nav-sublink.cyber-active {
        color: var(--green);
        font-weight: 600;
        background: rgba(0,210,135,.1);
    }

/* third level (nested inside a sublink group) */
.cyber-subnav-item.cyber-has-children > .cyber-subnav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sidebar-text);
    transition: background .2s var(--ease), color .2s var(--ease);
    cursor: pointer;
}

    .cyber-subnav-item.cyber-has-children > .cyber-subnav-parent:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

.cyber-subnav-item .cyber-nav-chevron {
    width: 12px;
    height: 12px;
}

.cyber-subnav-item.cyber-open > .cyber-subnav-parent .cyber-nav-chevron {
    transform: rotate(90deg);
}

.cyber-sub-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
}

.cyber-subnav-item.cyber-open > .cyber-sub-submenu {
    grid-template-rows: 1fr;
}

.cyber-sub-submenu__inner {
    overflow: hidden;
}

    .cyber-sub-submenu__inner ul {
        padding-left: 14px;
        margin-left: 8px;
        border-left: 1px dashed var(--sidebar-line);
    }

    .cyber-sub-submenu__inner .cyber-nav-sublink {
        font-size: 12.5px;
        padding: 6px 10px;
    }

/* footer / user mini */
.cyber-sidebar__footer {
    border-top: 1px solid var(--sidebar-line);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cyber-app.cyber-collapsed .cyber-sidebar__footer {
    justify-content: center;
    padding: 14px 0;
}

.cyber-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), #ffb84d);
    color: #3A2200;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cyber-user-mini {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-user-mini {
    opacity: 0;
    width: 0;
}

.cyber-user-mini strong {
    font-size: 12.5px;
    color: #fff;
    white-space: nowrap;
}

.cyber-user-mini span {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
}

/* Trung tâm chi phí - góc dưới menu trái */
.cyber-ttcp-icon {
    font-size: 20px;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
}

.cyber-ttcp-mini {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .15s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-ttcp-mini {
    opacity: 0;
    width: 0;
}

.cyber-ttcp-mini strong {
    font-size: 12.5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cyber-ttcp-mini span {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
}

.cyber-sidebar__footer[id="cyber-ttcp-anchor"] {
    cursor: pointer;
}

    .cyber-sidebar__footer[id="cyber-ttcp-anchor"]:hover {
        background: rgba(255,255,255,.06);
    }

.cyber-ttcp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /*    max-height: 280px;*/
    overflow-y: auto;
    margin: 12px 12px;
}

.cyber-ttcp-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 26px;
    /*    border: 0.5px solid #999;*/
}

    .cyber-ttcp-item:hover {
        background: var(--paper);
    }

    .cyber-ttcp-item.cyber-active {
        background: var(--orange-tint, #FFF3E0);
        border: 1px solid var(--orange, #f0a030);
    }

    .cyber-ttcp-item strong {
        font-size: 13px;
        color: var(--ink);
    }

    .cyber-ttcp-item small {
        font-size: 11px;
        color: var(--ink-soft);
    }

/* ============ MAIN ============ */
.cyber-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
    /* topbar giờ position:fixed (không còn sticky) nên chừa chỗ ở đây để nội dung
       không bị nó đè lên - tránh hẳn lỗi topbar "biến mất" khi cuộn do sticky mất
       ngữ cảnh cuộn (phụ thuộc ancestor) */
    padding-top: 68px;
    transition: margin-left .35s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-main {
    margin-left: var(--sidebar-w-collapsed);
}

.cyber-topbar {
    height: 68px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    z-index: 30;
    transition: left .35s var(--ease);
}

.cyber-app.cyber-collapsed .cyber-topbar {
    left: var(--sidebar-w-collapsed);
}

.cyber-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--ink-soft);
    transition: background .2s var(--ease), color .2s var(--ease);
    border: none;
    outline: none;
}

    .cyber-icon-btn:hover {
        background: var(--paper);
        color: var(--ink);
    }

    .cyber-icon-btn svg {
        width: 19px;
        height: 19px;
    }
/* ============ cyber note ============ */
.cyber-note {
    padding: 0 15px;
}

.cyber-note-text {
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    padding: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

    .cyber-note-text:focus {
        border-color: #1976d2;
    }

/* ================================================ */
/* ============ HORIZONTAL MULTI-LEVEL MENU (topbar) ============ */
.cyber-hmenu {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.cyber-hmenu-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.cyber-hmenu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    border-radius: 0;
    position: relative;
    transition: color .2s var(--ease);
}

    .cyber-hmenu-trigger::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 0;
        height: 2px;
        background: var(--green);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s var(--ease);
    }

    .cyber-hmenu-trigger span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

.cyber-hmenu-item:hover > .cyber-hmenu-trigger,
.cyber-hmenu-item.cyber-open > .cyber-hmenu-trigger {
    color: var(--ink);
}

    .cyber-hmenu-item:hover > .cyber-hmenu-trigger::after,
    .cyber-hmenu-item.cyber-open > .cyber-hmenu-trigger::after {
        transform: scaleX(1);
    }

.cyber-hmenu-caret {
    width: 10px;
    height: 10px;
    transition: transform .25s var(--ease);
    flex-shrink: 0;
}

.cyber-hmenu-item:hover .cyber-hmenu-caret,
.cyber-hmenu-item.cyber-open .cyber-hmenu-caret {
    transform: rotate(180deg);
}

.cyber-hmenu-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    min-width: 230px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14,27,23,.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 50;
    /* menu nhiều mục có thể cao hơn phần còn lại của màn hình - giới hạn theo viewport và
       tự cuộn bên trong (thanh cuộn mảnh, xem style bên dưới) thay vì bị tràn/che khuất.
       (Đã thử dùng CSS columns để tự dàn cột nhưng gây lỗi chồng hình với nội dung phía
       sau khi kết hợp position:absolute, nên quay lại overflow-y đơn giản, ổn định hơn.) */
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
}

    .cyber-hmenu-panel::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-hmenu-panel::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 3px;
    }

.cyber-hmenu-item:hover > .cyber-hmenu-panel,
.cyber-hmenu-item.cyber-open > .cyber-hmenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cyber-hmenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    position: relative;
    transition: background .15s var(--ease), color .15s var(--ease);
}

    .cyber-hmenu-link:hover {
        background: var(--green-tint);
        color: var(--green-dark);
    }
/* 3rd level: flyout to the right of the panel */
.cyber-hmenu-subitem {
    position: relative;
}

.cyber-hmenu-flyout {
    /* Bản thân phần tử này (do Blazor render) luôn ẩn tại chỗ - .cyber-hmenu-panel (cha) có
       overflow-y:auto/overflow-x:hidden để tự cuộn khi menu cấp 2 quá dài (xem phía trên) -
       overflow khác visible trên bất kỳ ancestor nào LUÔN cắt mất mọi phần tử con dù
       position:absolute hay fixed (theo spec), nên flyout cấp 3 trước đây luôn bị ẩn/che
       khuất. Khi hover, JS (CyberHMenu trong cyberjs.js) tạo 1 bản CLONE của phần tử này,
       gắn position:fixed + tọa độ tự tính theo vị trí thật trên màn hình rồi hiển thị bản
       clone đó ngoài document.body - không di chuyển phần tử gốc (nếu di chuyển thẳng phần
       tử Blazor đang quản lý ra ngoài như CyberLookup.positionPopup ở trên thì lần re-render
       kế tiếp của Blazor sẽ patch nhầm chỗ, xoá mất các mục cấp 2 khác trong panel). */
    position: fixed;
    left: -99999px;
    top: -99999px;
    min-width: 210px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14,27,23,.14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
}

    .cyber-hmenu-flyout::-webkit-scrollbar {
        width: 5px;
    }

    .cyber-hmenu-flyout::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 3px;
    }

    .cyber-hmenu-flyout.cyber-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

.cyber-hmenu-subitem > .cyber-hmenu-link .cyber-hmenu-caret {
    transform: rotate(-90deg);
}

.cyber-topbar__right {
    margin-left: auto;
    position: relative;
    cursor: pointer;
}

.cyber-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: .2s;
}

    .cyber-user:hover {
        background: #f3f4f6;
    }

.cyber-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: -20px;
    width: 280px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    overflow: hidden;
    z-index: 1000;
}

.cyber-user-menu-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
}

    .cyber-user-menu-header .avatar {
        font-size: 48px;
        color: #00b975;
    }

    .cyber-user-menu-header .name {
        font-weight: 600;
    }

    .cyber-user-menu-header .email {
        font-size: 13px;
        color: #6b7280;
    }

.cyber-user-menu-divider {
    height: 1px;
    background: #eee;
}

.cyber-bell-wrap {
    position: relative;
}

.cyber-bell-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgba(255,153,10,.6);
    animation: pulse 2.2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,153,10,.55);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255,153,10,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,153,10,0);
    }
}

.cyber-topbar__divider {
    width: 1px;
    height: 26px;
    background: var(--line);
    margin: 0 6px;
}

.cyber-topbar__user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px 6px 6px;
    border-radius: 10px;
    transition: background .2s var(--ease);
    position: relative;
    cursor: pointer;
}

    .cyber-topbar__user:hover {
        background: var(--paper);
    }

    .cyber-topbar__user .cyber-user-mini {
        opacity: 1;
        width: auto;
    }

        .cyber-topbar__user .cyber-user-mini strong {
            color: var(--ink);
        }

        .cyber-topbar__user .cyber-user-mini span {
            color: var(--ink-soft);
        }
/* ============ ACCOUNT DROPDOWN (hover on cyber-topbar__user) ============ */
.cyber-user-menu-caret {
    width: 12px;
    height: 12px;
    color: var(--ink-soft);
    margin-left: 1px;
    transition: transform .25s var(--ease), color .2s var(--ease);
    flex-shrink: 0;
}

.cyber-topbar__user:hover .cyber-user-menu-caret,
.cyber-topbar__user.cyber-open .cyber-user-menu-caret {
    transform: rotate(180deg);
    color: var(--ink);
}

.cyber-user-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(14,27,23,.16);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 60;
    cursor: default;
}

.cyber-topbar__user:hover .cyber-user-menu-panel,
.cyber-topbar__user.cyber-open .cyber-user-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cyber-user-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 8px 12px;
}

    .cyber-user-menu-head .cyber-user-avatar {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .cyber-user-menu-head strong {
        display: block;
        font-size: 13.5px;
        color: var(--ink);
    }

    .cyber-user-menu-head span {
        font-size: 11.5px;
        color: var(--ink-soft);
    }

.cyber-user-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 4px;
}

.cyber-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
    transition: background .15s var(--ease), color .15s var(--ease);
}

    .cyber-user-menu-item:hover {
        background: var(--paper);
    }

.cyber-user-menu-icon {
    width: 17px;
    height: 17px;
    color: var(--ink-soft);
    flex-shrink: 0;
    display: flex;
}

    .cyber-user-menu-icon svg {
        width: 100%;
        height: 100%;
    }

.cyber-user-menu-label {
    flex: 1;
    text-align: left;
}

.cyber-user-menu-value {
    font-size: 12px;
    color: var(--ink-soft);
}

.cyber-user-menu-badge {
    font-size: 10.5px;
    font-weight: 700;
    background: var(--orange-tint);
    color: var(--orange);
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

.cyber-user-menu-danger:hover {
    background: #FDECEC;
    color: #D6392B;
}

.cyber-user-menu-danger .cyber-user-menu-icon {
    color: inherit;
}
/* nested language flyout */
.cyber-user-menu-lang {
    position: relative;
}

.cyber-user-menu-caret-right {
    width: 11px;
    height: 11px;
    color: var(--ink-soft);
    flex-shrink: 0;
    transition: transform .2s var(--ease);
}

.cyber-user-menu-lang:hover .cyber-user-menu-caret-right {
    transform: translateX(2px);
}

.cyber-user-menu-flyout {
    position: absolute;
    top: -8px;
    right: calc(100% + 8px);
    width: 156px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(14,27,23,.14);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.cyber-user-menu-lang:hover .cyber-user-menu-flyout,
.cyber-user-menu-lang.cyber-open .cyber-user-menu-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cyber-user-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink);
}

    .cyber-user-menu-link:hover {
        background: var(--green-tint);
        color: var(--green-dark);
    }

    .cyber-user-menu-link.cyber-active {
        color: var(--green-dark);
        font-weight: 700;
    }

        .cyber-user-menu-link.cyber-active::after {
            content: "✓";
            margin-left: auto;
            font-size: 11px;
        }
/* content */
.cyber-content {
    padding: 6px;
    /*max-width: 1400px;*/
    width: 100%;
    margin: 0 auto;
}

.cyber-fade-up {
    animation: fadeUp .5s var(--ease) both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cyber-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
}

    .cyber-page-head h1 {
        font-size: 23px;
        font-weight: 800;
        margin: 0 0 4px;
    }

    .cyber-page-head p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 13.5px;
    }

.cyber-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 9px;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

    .cyber-btn svg {
        width: 15px;
        height: 15px;
    }

    .cyber-btn:active {
        transform: scale(.97);
    }

.cyber-btn-primary {
    background: var(--green);
    color: #04140D;
    box-shadow: 0 6px 16px rgba(0,210,135,.3);
}

    .cyber-btn-primary:hover {
        background: var(--green-dark);
    }

.cyber-btn-ghost {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
}

    .cyber-btn-ghost:hover {
        border-color: #cfd8d4;
    }
/* KPI grid */
.cyber-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.cyber-kpi-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 18px 16px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

    .cyber-kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(14,27,23,.07);
        border-color: transparent;
    }

.cyber-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cyber-kpi-label {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 500;
}

.cyber-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cyber-kpi-icon svg {
        width: 15px;
        height: 15px;
    }

    .cyber-kpi-icon.cyber-green {
        background: var(--green-tint);
        color: var(--green-dark);
    }

    .cyber-kpi-icon.cyber-orange {
        background: var(--orange-tint);
        color: var(--orange);
    }

.cyber-kpi-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -.02em;
}

.cyber-kpi-trend {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .cyber-kpi-trend svg {
        width: 12px;
        height: 12px;
    }

.cyber-trend-up {
    color: var(--green-dark);
}

.cyber-trend-warn {
    color: var(--orange);
}

.cyber-kpi-trend span.cyber-muted {
    color: var(--ink-soft);
    font-weight: 400;
}
/* main grid */
.cyber-dash-grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 16px;
    align-items: start;
}

.cyber-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 20px 18px;
}

.cyber-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .cyber-card-head h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
    }

    .cyber-card-head a {
        font-size: 12.5px;
        color: var(--green-dark);
        font-weight: 600;
    }
/* bar chart */
.cyber-chart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 170px;
    padding: 0 4px;
}

.cyber-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    justify-content: flex-end;
}

.cyber-chart-bar {
    width: 100%;
    max-width: 34px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    transition: filter .2s var(--ease), transform .2s var(--ease);
    transform-origin: bottom;
    animation: growBar .7s var(--ease) both;
}

@keyframes growBar {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

.cyber-chart-col:nth-child(6) .cyber-chart-bar {
    background: linear-gradient(180deg, var(--orange) 0%, #d97e00 100%);
}

.cyber-chart-bar:hover {
    filter: brightness(1.08);
}

.cyber-chart-col span {
    font-size: 11px;
    color: var(--ink-soft);
}
/* table */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

thead th {
    text-align: left;
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--line);
}

tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

tbody tr {
    transition: background .15s var(--ease);
}

    tbody tr:hover {
        background: var(--paper);
    }

.cyber-cust-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
}

.cyber-cust-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.cyber-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-block;
}

.cyber-badge-done {
    background: var(--green-tint);
    color: var(--green-dark);
}

.cyber-badge-progress {
    background: var(--orange-tint);
    color: var(--orange);
}

.cyber-badge-wait {
    background: #EEF1F0;
    color: var(--ink-soft);
}
/* right column */
.cyber-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cyber-task-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

    .cyber-task-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.cyber-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid #cfd8d4;
    flex-shrink: 0;
    margin-top: 1px;
    cursor: pointer;
    position: relative;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

    .cyber-checkbox.cyber-checked {
        background: var(--green);
        border-color: var(--green);
    }

        .cyber-checkbox.cyber-checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 4px;
            height: 9px;
            border: solid #04140D;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.cyber-task-text {
    font-size: 13px;
}

    .cyber-task-text strong {
        display: block;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .cyber-task-text span {
        font-size: 11.5px;
        color: var(--ink-soft);
    }

.cyber-task-item.cyber-done .cyber-task-text strong {
    text-decoration: line-through;
    color: var(--ink-soft);
}

.cyber-notif-item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

    .cyber-notif-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.cyber-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

    .cyber-notif-dot.cyber-green {
        background: var(--green);
    }

    .cyber-notif-dot.cyber-orange {
        background: var(--orange);
    }

.cyber-notif-text p {
    margin: 0 0 2px;
    font-size: 13px;
}

.cyber-notif-text span {
    font-size: 11.5px;
    color: var(--ink-soft);
}

.cyber-quick-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-top: 20px;
}

.cyber-quick-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

    .cyber-quick-card:hover {
        transform: translateY(-3px);
        border-color: transparent;
        box-shadow: 0 14px 28px rgba(14,27,23,.07);
    }

.cyber-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cyber-quick-icon svg {
        width: 16px;
        height: 16px;
    }

    .cyber-quick-icon.cyber-g {
        background: var(--green-tint);
        color: var(--green-dark);
    }

    .cyber-quick-icon.cyber-o {
        background: var(--orange-tint);
        color: var(--orange);
    }

.cyber-quick-card strong {
    font-size: 13.5px;
}

.cyber-quick-card span {
    font-size: 12px;
    color: var(--ink-soft);
}
/* responsive */
@media (max-width:1180px) {
    .cyber-kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .cyber-dash-grid {
        grid-template-columns: 1fr;
    }

    .cyber-quick-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:860px) {
    /* sidebar becomes an overlay drawer: hidden off-screen, no longer pushes content */
    .cyber-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(0,0,0,.25);
        width: 272px !important;
    }

    .cyber-app.cyber-mobile-open .cyber-sidebar {
        transform: translateX(0);
    }

    .cyber-sidebar__resize-handle {
        display: none;
    }

    .cyber-main {
        margin-left: 0 !important;
    }

    .cyber-topbar {
        left: 0 !important;
    }

    .cyber-hmenu {
        display: none;
    }

    .cyber-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cyber-quick-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cyber-content {
        padding: 20px 16px 50px;
    }
}
/* --------------------------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.filter-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-grid-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.filter-grid-item {
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .filter-grid-row {
        flex-wrap: wrap;
    }

        .filter-grid-row > .filter-grid-item {
            flex: 1 1 100% !important;
        }
}

/* Animation */
.voucher-sidebar,
.voucher-header,
.voucher-item,
.voucher-item-header,
.voucher-body,
.voucher-content {
    transition: all .25s ease;
}

/* ===========================MENU VOUCHER THU NHỎ=========================== */
.voucher-layout.voucher-layout-zoom .voucher-sidebar {
    width: 68px;
    min-width: 68px;
    padding: 8px 4px;
}
/* Header khi thu nhỏ */
.voucher-layout.voucher-layout-zoom .voucher-header {
    display: flex;
    margin-bottom: 10px;
}
/* Chỉ còn icon search */
.voucher-layout.voucher-layout-zoom .cyber-input-group {
    width: 100%;
    justify-content: center !important;
    margin: 0 !important;
    flex-direction: column;
    border: none;
    background: transparent;
}

/* Khi thu nhỏ: ẩn search */
.voucher-layout.voucher-layout-zoom .voucher-header .voucher-search {
    display: none;
}

/* Hiển thị riêng nút view_in_ar */
.voucher-layout.voucher-layout-zoom .voucher-header .voucher-view-list {
    display: block;
}

.voucher-layout.voucher-layout-zoom .voucher-title {
    display: none;
}
.voucher-layout.voucher-layout-zoom .voucher-search {
    display: none;
}
/* Card */
.voucher-layout.voucher-layout-zoom .voucher-item {
    padding: 8px 2px;
    justify-content: center;
    align-items: center;
}
    .voucher-layout.voucher-layout-zoom .voucher-item.active::before {
        width: 3px;
    }
/* Chỉ còn Stt_Rec */
.voucher-layout.voucher-layout-zoom .voucher-item-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Ẩn toàn bộ thông tin */
.voucher-layout.voucher-layout-zoom .voucher-name,
.voucher-layout.voucher-layout-zoom .voucher-body,
.voucher-layout.voucher-layout-zoom .voucher-icon,
.voucher-layout.voucher-layout-zoom .divider {
    display: none !important;
}
.voucher-layout.voucher-layout-zoom .voucher-item-header::before {
    content: attr(data-soct);
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
}
.voucher-layout.voucher-layout-zoom .voucher-list {
    padding: 6px 0;
}
.voucher-layout.voucher-layout-zoom .cyber-dv-pager {
    display: none;
}
.voucher-layout.voucher-layout-zoom .cyber-dv-searchbar {
    display: none;
}
.voucher-layout.voucher-layout-zoom .cyber-input-group:focus-within {
    border: none;
    box-shadow: none;
}
.voucher-layout.voucher-layout-zoom .cyber-dv-group-tabs {
    display: none;
}
/* ====================================================== */

.cyber-dv-list::-webkit-scrollbar {
    width: 5px;
}

.cyber-dv-list::-webkit-scrollbar-track {
    background: transparent;
}

.cyber-dv-list::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, .3);
    border-radius: 10px;
}

    .cyber-dv-list::-webkit-scrollbar-thumb:hover {
        background: rgba(90, 90, 90, .55);
    }

.cyber-dv-list {
    /* Firefox không đọc ::-webkit-scrollbar - "thin" là mức mỏng nhất trình duyệt hỗ trợ, kết hợp
       màu rgba trong suốt để đỡ nổi bật giữa giao diện danh sách. */
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 120, .3) transparent;
}
/* -----------------css control CyberStar-----------------------------*/
.cyber-star-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
}

.cyber-star-label {
    font-size: 13px;
    color: #555;
}

.cyber-star-row {
    display: inline-flex;
    gap: 16px !important;
    outline: none;
}

.cyber-star-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.cyber-star {
    line-height: 1;
    white-space: nowrap;
    font-size: 24px !important;
}

.cyber-star-empty {
    color: #d9d9d9;
}

.cyber-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #FACC15 !important;
    transition: width .1s var(--ease, ease);
}

.cyber-star-readonly .cyber-star-wrap {
    cursor: default;
}
/* -----------------------------------------------------------*/

/* ================= MINIMAL STORE ================= */
:root{
 --ms-bg:#0b1116;--ms-bg2:#111a21;--ms-card:#121c23;--ms-text:#f5f7f8;
 --ms-muted:#9ca8af;--ms-line:rgba(220,228,233,.14);--ms-white:#fff;
}
html{scroll-behavior:smooth}
body{background:var(--ms-bg)!important;color:var(--ms-text)!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important}
a{text-decoration:none;color:inherit}
.ms-container{width:min(1240px,calc(100% - 48px));margin:0 auto}
.ms-header{background:rgba(7,12,17,.97);border-bottom:1px solid var(--ms-line);position:sticky;top:0;z-index:100;backdrop-filter:blur(14px)}
.ms-header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.ms-logo-wrap{display:flex;align-items:center;gap:12px}
.ms-logo-mark{width:50px;height:50px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.25);background:#111a21}
.ms-logo{font-size:20px;letter-spacing:.13em;font-weight:800;white-space:nowrap}
.ms-logo span{font-weight:400;color:#aeb8be}
.ms-nav{display:flex;gap:28px;font-size:13px}
.ms-nav a{padding:31px 0;color:#cbd2d6;position:relative}
.ms-nav a:hover{color:#fff}
.ms-nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;background:#fff}
.ms-header-actions{display:flex;gap:20px;font-size:13px;align-items:center;color:#dce2e6}
.ms-hero{min-height:650px;background:radial-gradient(circle at 78% 42%,rgba(108,126,138,.22),transparent 27%),linear-gradient(120deg,#080e13,#101a21 52%,#17242d);display:flex;align-items:center;border-bottom:1px solid var(--ms-line)}
.ms-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:72px 0}
.ms-eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:#aeb9c0}
.ms-hero h1{font-size:clamp(52px,7vw,92px);line-height:.92;letter-spacing:-.06em;margin:18px 0 26px;font-weight:700;color:#fff}
.ms-hero-copy p{max-width:500px;color:#b4bec4;font-size:17px;line-height:1.7}
.ms-hero-actions{display:flex;gap:12px;margin-top:34px}
.ms-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid #cfd6da;font-size:13px;cursor:pointer}
.ms-btn-dark{background:#f5f7f8;color:#0b1116;border-color:#f5f7f8}
.ms-btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ms-hero-art{height:480px;position:relative}
.ms-art-card{position:absolute;display:flex;align-items:center;justify-content:center}
.ms-art-card-1{width:250px;height:320px;right:15%;top:12%;background:#0a0f14;color:#fff;font-size:120px;font-weight:800;border:1px solid rgba(255,255,255,.18);box-shadow:30px 30px 0 rgba(174,185,192,.10)}
.ms-art-card-2{width:210px;height:260px;left:8%;bottom:6%;background:#26333d;border:1px solid rgba(255,255,255,.10);transform:rotate(-8deg)}
.ms-art-card-3{width:105px;height:105px;right:2%;bottom:2%;background:#e8edf0;color:#10161b;border:1px solid #fff;font-size:22px;letter-spacing:.1em}
.ms-section{padding:100px 0;background:var(--ms-bg)}
.ms-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:38px}
.ms-section-head h2{font-size:40px;letter-spacing:-.04em;margin:10px 0 0;color:#fff}
.ms-section-head>a{font-size:13px;border-bottom:1px solid #c8d0d5;padding-bottom:4px;color:#dce3e7}
.ms-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ms-product-card{min-width:0;background:var(--ms-card);border:1px solid var(--ms-line)}
.ms-product-image{height:390px;background:#e8eaeb;display:block;position:relative;overflow:hidden}
.ms-product-image img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block;transition:transform .5s ease;padding:14px;box-sizing:border-box}
.ms-product-card:hover .ms-product-image img{transform:scale(1.035)}
.ms-badge{position:absolute;top:14px;left:14px;background:#10171d;color:#fff;border:1px solid rgba(255,255,255,.2);font-size:10px;letter-spacing:.12em;padding:7px 9px}
.ms-product-info{padding:17px 16px 18px}
.ms-product-category{font-size:11px;color:#8e9aa2;text-transform:uppercase;letter-spacing:.1em}
.ms-product-info h3{font-size:16px;font-weight:500;margin:8px 0 14px;color:#fff}
.ms-product-bottom{display:flex;justify-content:space-between;align-items:center}
.ms-product-bottom strong{font-size:14px;color:#e7ecef}
.ms-add{border:1px solid rgba(220,228,233,.28);background:#18242d;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:20px}
.ms-strip{background:#05090d;color:#fff;padding:28px 0;border-top:1px solid var(--ms-line);border-bottom:1px solid var(--ms-line)}
.ms-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ms-strip-grid div{display:flex;gap:12px;align-items:center;font-size:12px}
.ms-strip-grid strong{font-size:11px;color:#7f8b93}
.ms-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ms-category-card{min-height:220px;border:1px solid var(--ms-line);display:flex;flex-direction:column;justify-content:end;padding:25px;background:linear-gradient(145deg,#17232c,#0e171e);transition:transform .2s,border-color .2s}
.ms-category-card:hover{transform:translateY(-4px);border-color:rgba(220,228,233,.28)}
.ms-category-card span{font-size:25px;letter-spacing:-.03em;color:#fff}
.ms-category-card small{margin-top:7px;color:#9ca7ad}
.ms-footer{background:#060b0f;border-top:1px solid var(--ms-line);padding:70px 0 0}
.ms-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;padding-bottom:60px}
.ms-footer-grid p{color:#7f8b93;max-width:260px;line-height:1.7}
.ms-footer-grid strong{display:block;font-size:11px;letter-spacing:.15em;margin-bottom:18px;color:#dce3e7}
.ms-footer-grid a{display:block;color:#89959c;margin:0 0 11px;font-size:13px}
.ms-footer-grid a:hover{color:#fff}
.ms-logo-footer{margin-bottom:15px}
.ms-footer-bottom{border-top:1px solid var(--ms-line);padding:20px 0;display:flex;justify-content:space-between;color:#69757d;font-size:11px}
.ms-inner-page{padding:90px 0 120px;min-height:65vh;background:var(--ms-bg)}
.ms-inner-page h1{font-size:52px;letter-spacing:-.05em;margin:14px 0;color:#fff}
.ms-page-lead{color:#8f9ba2;margin-bottom:36px}
.ms-filter-row{display:flex;gap:22px;border-bottom:1px solid var(--ms-line);padding-bottom:15px;margin-bottom:32px}
.ms-filter-row a{color:#89959c;font-size:13px}
.ms-filter-row a.active{color:#fff;border-bottom:1px solid #fff;padding-bottom:5px}
.ms-back{display:inline-block;color:#89959c;margin-bottom:35px}
.ms-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.ms-detail-image{background:#e8eaeb;height:650px}
.ms-detail-image img{width:100%;height:100%;object-fit:contain;object-position:center center;padding:20px;box-sizing:border-box}
.ms-detail-copy{padding-top:35px}
.ms-detail-copy h1{font-size:58px;line-height:1;letter-spacing:-.05em;margin:16px 0}
.ms-detail-price{font-size:22px;margin:25px 0;color:#fff}
.ms-detail-copy p{color:#929da4;line-height:1.8;max-width:460px;margin-bottom:28px}
.ms-detail-note{margin-top:15px;font-size:13px;color:#dce3e7}
.ms-simple-page{max-width:850px}
.ms-simple-page p{color:#929da4;line-height:1.8;font-size:16px;max-width:650px;margin:20px 0 30px}
.ms-toast{position:fixed;right:24px;bottom:24px;background:#eef2f4;color:#0a1116;padding:14px 18px;z-index:200;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
@media(max-width:900px){.ms-nav{display:none}.ms-hero-grid{grid-template-columns:1fr;gap:25px}.ms-hero{min-height:auto}.ms-hero-art{height:360px}.ms-product-grid{grid-template-columns:repeat(2,1fr)}.ms-product-image{height:330px}.ms-category-grid{grid-template-columns:repeat(2,1fr)}.ms-strip-grid{grid-template-columns:repeat(2,1fr)}.ms-footer-grid{grid-template-columns:1fr 1fr}.ms-detail{grid-template-columns:1fr}}
@media(max-width:560px){.ms-container{width:min(100% - 28px,1240px)}.ms-header-inner{height:64px}.ms-header-actions{gap:10px}.ms-logo-mark{width:42px;height:42px}.ms-hero h1{font-size:54px}.ms-product-grid{grid-template-columns:1fr}.ms-product-image{height:380px}.ms-category-grid{grid-template-columns:1fr}.ms-footer-grid{grid-template-columns:1fr}.ms-footer-bottom{gap:12px;flex-direction:column}}

/* ================= ADMIN ================= */
.ms-admin-shell{min-height:100vh;background:#f3f5f6;color:#152029;display:flex}
.ms-admin-side{width:240px;background:#081016;color:#fff;padding:24px 16px;position:fixed;inset:0 auto 0 0}
.ms-admin-brand{display:flex;align-items:center;gap:10px;padding:8px 8px 24px;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:800;letter-spacing:.08em}
.ms-admin-brand img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.ms-admin-brand small{display:block;color:#87949b;font-size:9px;letter-spacing:.18em;margin-top:4px}
.ms-admin-side nav{display:flex;flex-direction:column;gap:5px;margin-top:22px}
.ms-admin-side nav a{padding:12px 13px;border-radius:7px;color:#aeb9bf;font-size:13px}
.ms-admin-side nav a:hover{background:#14212a;color:#fff}
.ms-admin-main{margin-left:240px;width:calc(100% - 240px);padding:32px}
.ms-admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.ms-admin-head h1{font-size:30px;margin:0;color:#10181e}
.ms-admin-card{background:#fff;border:1px solid #e1e6e9;border-radius:10px;padding:20px;box-shadow:0 5px 20px rgba(11,24,32,.04)}
.ms-admin-table{width:100%;border-collapse:collapse}
.ms-admin-table th,.ms-admin-table td{padding:12px;border-bottom:1px solid #edf0f2;text-align:left;font-size:13px;vertical-align:middle}
.ms-admin-table th{color:#68767f;font-weight:600;background:#fafbfb}
.ms-admin-table img{width:58px;height:58px;object-fit:contain;object-position:center;background:#f3f6f8;border-radius:6px;padding:4px;box-sizing:border-box}
.ms-admin-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #cfd7dc;border-radius:6px;padding:9px 14px;background:#fff;color:#18232b;cursor:pointer;font-size:13px}
.ms-admin-btn.primary{background:#0b1116;border-color:#0b1116;color:#fff}
.ms-admin-btn.danger{color:#b42318;border-color:#efc7c3}
.ms-admin-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ms-admin-form .full{grid-column:1/-1}
.ms-admin-field{display:flex;flex-direction:column;gap:6px}
.ms-admin-field label{font-size:12px;font-weight:600;color:#52616a}
.ms-admin-field input,.ms-admin-field textarea,.ms-admin-field select{border:1px solid #d5dde1;border-radius:6px;padding:10px 11px;font:inherit;background:#fff;color:#18232b}
.ms-admin-field textarea{min-height:130px;resize:vertical}
.ms-admin-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#52616a}
.ms-admin-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.ms-admin-login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#1c2a33,#071016 55%);padding:20px}
.ms-admin-login-card{width:min(420px,100%);background:#101b22;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:32px;box-shadow:0 20px 70px rgba(0,0,0,.4)}
.ms-admin-login-card img{width:76px;height:76px;border-radius:50%;display:block;margin:0 auto 18px}
.ms-admin-login-card h1{text-align:center;font-size:24px;margin:0 0 8px}
.ms-admin-login-card p{text-align:center;color:#9ba8af;font-size:13px;margin-bottom:25px}
.ms-admin-login-card .ms-admin-field{margin-bottom:14px}
.ms-admin-login-card label{color:#aeb9bf}
.ms-admin-login-card input{background:#0b1319;border-color:#2a3942;color:#fff;width:100%;box-sizing:border-box}
.ms-admin-login-card .ms-admin-btn{width:100%;background:#f1f4f5;border-color:#f1f4f5;color:#0b1116}
.ms-admin-error{background:#3a1717;border:1px solid #6e2b2b;color:#ffb4b4;padding:10px;border-radius:6px;font-size:13px;margin-bottom:15px}
@media(max-width:800px){.ms-admin-side{width:200px}.ms-admin-main{margin-left:200px;width:calc(100% - 200px);padding:20px}.ms-admin-form{grid-template-columns:1fr}}
@media(max-width:560px){.ms-admin-side{position:static;width:100%;min-height:auto}.ms-admin-shell{display:block}.ms-admin-main{margin:0;width:auto}.ms-admin-side nav{display:grid;grid-template-columns:repeat(2,1fr)}.ms-admin-table{min-width:700px}.ms-admin-card{overflow:auto}}
.ms-hero-logo{width:300px;height:300px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.35);position:absolute;right:18%;top:50%;transform:translateY(-50%)}
.ms-art-caption{position:absolute;right:2%;bottom:3%;font-size:15px;line-height:1.45;letter-spacing:.22em;color:#9ca8af;text-align:left}
.ms-detail-content{color:#aeb9bf;line-height:1.8}.ms-detail-content h2,.ms-detail-content h3{color:#fff}.ms-detail-content img{max-width:100%}
.ms-cart-list{border-top:1px solid var(--ms-line)}.ms-cart-item{display:grid;grid-template-columns:90px 1fr 90px 130px 35px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ms-line)}.ms-cart-item img{width:90px;height:90px;object-fit:contain;object-position:center;background:#e8eaeb;padding:6px;box-sizing:border-box}.ms-cart-name{display:flex;flex-direction:column;gap:8px}.ms-cart-name span{color:#929da4;font-size:13px}.ms-cart-item input{width:65px;padding:8px;background:#121c23;color:#fff;border:1px solid var(--ms-line)}.ms-cart-item strong{text-align:right}.ms-remove{background:none;border:0;color:#aeb9bf;font-size:24px;cursor:pointer}.ms-cart-summary{display:flex;justify-content:flex-end;gap:40px;padding:25px 0;font-size:18px}.ms-post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.ms-post-card{background:#121c23;border:1px solid var(--ms-line);display:grid;grid-template-columns:220px 1fr;min-height:220px}.ms-post-card img{width:100%;height:100%;object-fit:cover;background:#e8eaeb}.ms-post-card>div{padding:25px}.ms-post-card h2{font-size:24px;color:#fff}.ms-post-card p{color:#929da4;line-height:1.7}.ms-post-card a{color:#e2e8eb}.ms-post-detail h1{font-size:58px;max-width:900px}.ms-post-cover{width:100%;max-height:620px;object-fit:cover;margin:30px 0}.ms-post-content{max-width:850px;color:#c0c9ce;line-height:1.9;font-size:16px}.ms-post-content h2,.ms-post-content h3{color:#fff}.ms-post-content img{max-width:100%}
@media(max-width:800px){.ms-cart-item{grid-template-columns:70px 1fr 55px 90px 25px}.ms-cart-item img{width:70px;height:70px}.ms-post-grid{grid-template-columns:1fr}.ms-post-card{grid-template-columns:160px 1fr}.ms-hero-logo{width:230px;height:230px;right:10%}}
@media(max-width:560px){.ms-cart-item{grid-template-columns:60px 1fr 25px}.ms-cart-item img{width:60px;height:60px}.ms-cart-item input,.ms-cart-item strong{grid-column:2}.ms-post-card{grid-template-columns:1fr}.ms-post-card img{height:230px}.ms-post-detail h1{font-size:40px}.ms-hero-logo{width:190px;height:190px;right:50%;transform:translate(50%,-50%)}}

/* Minimal Store account / checkout / order module */
.ms-account-page { max-width: 1180px; padding-top: 70px; padding-bottom: 90px; }
.ms-account-form { max-width: 620px; display:grid; gap:16px; margin:30px 0; }
.ms-account-form label, .ms-account-card label { display:grid; gap:7px; font-size:13px; color:#73808a; }
.ms-account-form input, .ms-account-card input, .ms-account-card select, .ms-account-card textarea,
.ms-account-page select, .ms-account-page input { border:1px solid #34424c; background:#0b1115; color:#f3f6f7; padding:13px 14px; border-radius:2px; }
.ms-account-form input:focus, .ms-account-card input:focus { outline:1px solid #9baab3; }
.ms-form-error { max-width:620px; padding:13px 16px; border:1px solid #7f3d3d; background:#2a1414; color:#f3caca; margin:18px 0; }
.ms-account-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:22px; margin-top:30px; }
.ms-account-card { border:1px solid #26323a; background:#0d1419; padding:28px; border-radius:2px; }
.ms-account-card h2 { margin:0 0 20px; }
.ms-order-list { display:grid; }
.ms-order-row { display:grid; grid-template-columns:1.4fr 1fr auto; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid #26323a; color:inherit; text-decoration:none; }
.ms-order-row small { display:block; opacity:.6; margin-top:5px; }
.ms-order-row:hover { opacity:.8; }
.ms-checkout-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; margin-top:30px; }
.ms-checkout-grid .ms-account-card { display:grid; align-content:start; gap:14px; }
.ms-checkout-item { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #26323a; }
.ms-checkout-total { display:flex; justify-content:space-between; font-size:20px; padding-top:18px; margin-top:8px; }
.ms-note { color:#8c9aa3; font-size:13px; }
.ms-order-head { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.ms-status { padding:9px 14px; border:1px solid #65757e; }
.ms-timeline { display:grid; gap:0; }
.ms-timeline-item { padding:14px 0 14px 20px; border-left:2px solid #64747d; position:relative; }
.ms-timeline-item:before { content:""; width:8px; height:8px; background:#dfe6e9; position:absolute; left:-5px; top:19px; border-radius:50%; }
.ms-timeline-item b { display:block; }
.ms-timeline-item small { display:block; color:#8c9aa3; margin-top:4px; }
.ms-timeline-item p { margin:7px 0 0; color:#aeb8bd; }
@media(max-width:800px){
  .ms-account-grid,.ms-checkout-grid{grid-template-columns:1fr}
  .ms-order-row{grid-template-columns:1fr}
  .ms-order-head{align-items:start; flex-direction:column}
}

/* Minimal Store customer account / checkout */
.ms-auth-choice-grid { grid-template-columns: 1fr 1fr; }
.ms-account-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:30px; padding:22px 26px; border:1px solid #26323a; background:#0d1419; }
.ms-account-info { display:grid; gap:0; }
.ms-account-info p { display:flex; justify-content:space-between; gap:20px; padding:13px 0; margin:0; border-bottom:1px solid #26323a; color:#aeb9bf; }
.ms-account-info p span { color:#73808a; }
.ms-account-info p b { color:#f3f6f7; text-align:right; }
.ms-status-small { display:inline-block; padding:6px 9px; font-size:12px; white-space:nowrap; }
.ms-checkout-item { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid #26323a; }
.ms-checkout-total { display:flex; justify-content:space-between; gap:20px; padding:20px 0; font-size:18px; }
@media(max-width:800px){ .ms-auth-choice-grid { grid-template-columns:1fr; } .ms-account-toolbar { align-items:flex-start; flex-direction:column; } .ms-account-info p { flex-direction:column; gap:5px; } .ms-account-info p b { text-align:left; } }


/* ================= MINIMAL STORE VISUAL REFRESH ================= */
:root{
 --ms-accent:#c7d8e3;
 --ms-accent-2:#8ea8b8;
 --ms-glow:rgba(156,191,211,.18);
}
body{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif!important;letter-spacing:.005em}
.ms-logo,.ms-nav,.ms-header-actions,.ms-eyebrow,.ms-btn,.ms-product-category,.ms-strip-grid,.ms-footer-grid strong{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif}
.ms-header{background:rgba(5,10,14,.82);backdrop-filter:blur(20px) saturate(125%);box-shadow:0 10px 40px rgba(0,0,0,.16)}
.ms-nav{gap:34px;font-size:14px;font-weight:520}
.ms-nav a{padding:31px 0;color:#cfd8dd;transition:color .25s ease,transform .25s ease}
.ms-nav a:hover{color:#fff;transform:translateY(-1px)}
.ms-header-actions{font-size:14px;gap:22px}
.ms-header-actions a{transition:color .25s ease,transform .25s ease}
.ms-header-actions a:hover{color:#fff;transform:translateY(-1px)}

/* Hero: exactly two headline lines + single-line supporting copy on desktop */
.ms-hero{min-height:690px;background:radial-gradient(circle at 84% 35%,rgba(130,160,177,.18),transparent 24%),radial-gradient(circle at 12% 90%,rgba(84,112,132,.10),transparent 28%),linear-gradient(120deg,#070d12,#0d171e 54%,#111e27)}
.ms-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:30px}
.ms-hero-copy{position:relative;z-index:2}
.ms-hero h1{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif;font-size:clamp(46px,5.3vw,82px);line-height:.98;letter-spacing:-.055em;margin:22px 0 28px;font-weight:760;max-width:none}
.ms-hero h1 span{display:block;white-space:nowrap}
.ms-hero-copy p{max-width:none;white-space:nowrap;font-size:18px;line-height:1.6;color:#b9c5cc}
.ms-hero-actions{margin-top:38px}
.ms-btn{min-height:52px;padding:0 27px;border-radius:1px;font-weight:600;letter-spacing:.01em;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.ms-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.24)}
.ms-btn-dark:hover{background:#fff}
.ms-btn-light:hover{border-color:#dce7ed;background:rgba(255,255,255,.06)}
.ms-hero-art{height:510px}
.ms-hero-logo{width:330px;height:330px;right:9%;box-shadow:0 30px 100px rgba(0,0,0,.45),0 0 70px rgba(167,197,214,.10);animation:msFloat 7s ease-in-out infinite}
.ms-art-caption{letter-spacing:.28em;color:#aebdc6}
@keyframes msFloat{0%,100%{transform:translateY(-50%) translate3d(0,0,0)}50%{transform:translateY(calc(-50% - 10px)) translate3d(0,0,0)}}

/* Account choice */
.ms-auth-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
.ms-auth-choice{position:relative;overflow:hidden;min-height:360px;padding:42px;background:linear-gradient(145deg,#111b22,#0b1217);border:1px solid rgba(206,222,231,.13);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.ms-auth-choice:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;background:radial-gradient(circle,rgba(169,201,218,.17),transparent 68%);transition:transform .5s ease}
.ms-auth-choice:hover{transform:translateY(-7px);border-color:rgba(198,220,233,.34);box-shadow:0 25px 70px rgba(0,0,0,.28)}
.ms-auth-choice:hover:before{transform:scale(1.2)}
.ms-auth-choice-register{background:linear-gradient(145deg,#121c23,#0d151b)}
.ms-auth-choice-number{font-size:12px;letter-spacing:.22em;color:#7f96a5;margin-bottom:55px}
.ms-auth-choice h2{font-size:34px;line-height:1.05;letter-spacing:-.035em;margin:14px 0 16px;color:#fff;font-weight:650}
.ms-auth-choice p{max-width:510px;color:#9eabb2;font-size:15px;line-height:1.75;margin-bottom:34px}
.ms-auth-choice-action{display:flex;align-items:center;justify-content:space-between;max-width:190px;padding:15px 0;border-bottom:1px solid rgba(222,234,241,.45);font-weight:650;color:#f7f9fa;transition:max-width .3s ease,color .3s ease}
.ms-auth-choice-action b{font-size:20px;font-weight:400}
.ms-auth-choice:hover .ms-auth-choice-action{max-width:235px;color:#d8e7ef}

/* Login / register visual */
.ms-auth-page{min-height:calc(100vh - 82px);display:grid;grid-template-columns:minmax(360px,.85fr) minmax(520px,1.15fr);background:#080f14}
.ms-auth-visual{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:760px;background:radial-gradient(circle at 50% 45%,rgba(145,181,202,.13),transparent 30%),linear-gradient(145deg,#0b141b,#071016)}
.ms-auth-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.025) 48% 49%,transparent 49% 100%);opacity:.8}
.ms-auth-visual-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;padding:30px}
.ms-auth-visual-content img{width:108px;height:108px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 50px rgba(179,207,221,.12),0 25px 70px rgba(0,0,0,.45);animation:msFloat 6s ease-in-out infinite}
.ms-auth-visual-content span{font-size:11px;letter-spacing:.32em;color:#9fb2bd;font-weight:700}
.ms-auth-visual-content strong{font-size:38px;letter-spacing:-.045em;color:#fff;font-weight:700}
.ms-auth-visual-content small{color:#81919b;font-size:14px}
.ms-auth-orbit{position:absolute;border:1px solid rgba(186,213,226,.12);border-radius:50%;pointer-events:none}
.ms-auth-orbit-a{width:520px;height:520px;animation:msSpin 20s linear infinite}
.ms-auth-orbit-b{width:720px;height:720px;border-color:rgba(186,213,226,.07);animation:msSpin 28s linear infinite reverse}
@keyframes msSpin{to{transform:rotate(360deg)}}
.ms-auth-panel{padding:90px clamp(40px,7vw,120px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#0a1116,#0b1319)}
.ms-auth-panel h1{font-size:clamp(52px,5vw,78px);line-height:.95;letter-spacing:-.06em;margin:15px 0 15px;font-weight:720;color:#fff}
.ms-auth-lead{font-size:16px;color:#8e9da6;margin:0 0 28px}
.ms-auth-form{max-width:620px;width:100%;gap:19px;margin:12px 0 22px}
.ms-auth-form label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8999a3;font-weight:650}
.ms-auth-form input{height:56px;padding:0 16px;border:1px solid #2b3a43;background:#0a1116;color:#f6f8f9;border-radius:2px;font-size:15px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.ms-auth-form input::placeholder{color:#52616a}
.ms-auth-form input:focus{outline:none;border-color:#9eb8c8;box-shadow:0 0 0 4px rgba(155,188,207,.08);transform:translateY(-1px)}
.ms-auth-submit{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:1px solid #eef3f5;background:#f3f6f7;color:#0a1116;font-size:15px;font-weight:700;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.ms-auth-submit:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.28)}
.ms-auth-submit b{font-size:24px;font-weight:400}
.ms-auth-switch{font-size:14px;color:#74838c}
.ms-auth-switch a{color:#e3edf2;border-bottom:1px solid #5c717e;padding-bottom:3px}
.ms-password-wrap{position:relative;display:block}
.ms-password-wrap input{width:100%;padding-right:54px!important}
.ms-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;color:#7d919d;cursor:pointer;font-size:15px;transition:color .2s ease,transform .2s ease}
.ms-password-toggle:hover,.ms-password-toggle.is-visible{color:#e4edf2;transform:translateY(-50%) scale(1.08)}
.ms-auth-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ms-register-form{gap:16px}
.ms-form-error{border-radius:2px;animation:msError .35s ease}
@keyframes msError{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1100px){
 .ms-hero h1{font-size:clamp(42px,5.6vw,68px)}
 .ms-hero-copy p{white-space:normal;max-width:680px}
 .ms-auth-page{grid-template-columns:1fr}
 .ms-auth-visual{min-height:340px}
 .ms-auth-orbit-a{width:330px;height:330px}.ms-auth-orbit-b{width:470px;height:470px}
 .ms-auth-panel{padding:70px 7vw}
}
@media(max-width:700px){
 .ms-hero-grid{grid-template-columns:1fr}.ms-hero h1 span{white-space:normal}.ms-hero-copy p{font-size:16px}
 .ms-hero-art{height:320px}.ms-hero-logo{width:220px;height:220px;right:50%;transform:translate(50%,-50%)}
 .ms-auth-choice-grid{grid-template-columns:1fr}.ms-auth-choice{min-height:310px;padding:30px}.ms-auth-choice-number{margin-bottom:35px}
 .ms-auth-panel{padding:55px 24px}.ms-auth-panel h1{font-size:52px}.ms-auth-two-col{grid-template-columns:1fr}
 .ms-auth-visual{min-height:300px}.ms-auth-visual-content strong{font-size:30px}
}

/* ================= MINIMAL STORE SMART LIGHT VISUAL ================= */
:root{--ms-bg:#f6f8fb;--ms-surface:#fff;--ms-surface-soft:#eef4f8;--ms-text:#17212b;--ms-muted:#64748b;--ms-border:#dbe4eb;--ms-accent:#4f6f8f;--ms-accent-soft:#dceaf5;--ms-hero-start:#f5f9fc;--ms-hero-end:#e9f1f6;--ms-font-scale:1}
html{font-size:calc(16px * var(--ms-font-scale))}
body{background:var(--ms-bg)!important;color:var(--ms-text)!important;font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif!important}
.ms-site{background:var(--ms-bg);color:var(--ms-text);min-height:100vh}
.ms-header{background:rgba(255,255,255,.84)!important;border-bottom:1px solid var(--ms-border)!important;box-shadow:0 8px 30px rgba(32,56,72,.08)!important;backdrop-filter:blur(18px) saturate(140%)}
.ms-logo{color:#17212b!important}.ms-logo span{color:#667684!important}
.ms-nav{gap:28px!important}.ms-nav a{color:#334155!important;font-size:15px!important;font-weight:600!important;position:relative;display:inline-flex;align-items:center;gap:8px}.ms-nav a:hover{color:var(--ms-accent)!important}.ms-nav-icon,.ms-icon{font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:var(--ms-accent);transition:transform .22s ease,color .22s ease}.ms-nav a:hover .ms-nav-icon,.ms-header-actions a:hover .ms-icon{transform:translateY(-2px) scale(1.08);color:#6f8eaa}
.ms-header-actions{color:#334155!important;font-size:15px!important}.ms-header-actions a{color:#334155!important;display:inline-flex;align-items:center;gap:7px}.ms-header-actions a:hover{color:var(--ms-accent)!important}
.ms-hero{background:radial-gradient(circle at 84% 25%,rgba(106,151,183,.22),transparent 24%),radial-gradient(circle at 8% 92%,rgba(137,170,195,.18),transparent 26%),linear-gradient(125deg,var(--ms-hero-start),var(--ms-hero-end))!important;color:var(--ms-text)!important;min-height:690px}
.ms-hero h1{font-size:clamp(56px,6.1vw,96px)!important;color:#14202b!important;letter-spacing:-.065em!important;font-weight:780!important}.ms-hero-copy p{font-size:20px!important;color:#506273!important}.ms-eyebrow{color:var(--ms-accent)!important}.ms-btn-light{background:rgba(255,255,255,.7)!important;border-color:#a9bbc8!important;color:#20303c!important}.ms-btn-dark{background:#203747!important;color:#fff!important}.ms-btn:hover{box-shadow:0 14px 35px rgba(51,83,104,.18)!important}
.ms-strip{background:rgba(255,255,255,.78)!important;border-top:1px solid var(--ms-border)!important;border-bottom:1px solid var(--ms-border)!important}.ms-strip-grid div{font-size:15px!important;color:#334155!important}.ms-strip-grid strong{color:var(--ms-accent)!important;font-size:12px!important}
.ms-section-head h2{font-size:clamp(42px,3.5vw,52px)!important;color:#17212b!important}.ms-section-head p{color:#64748b!important}
.ms-product-card,.ms-category-card,.ms-auth-choice{background:rgba(255,255,255,.9)!important;border-color:var(--ms-border)!important;box-shadow:0 12px 35px rgba(43,67,83,.06)}
.ms-product-card:hover,.ms-category-card:hover,.ms-auth-choice:hover{box-shadow:0 22px 55px rgba(54,82,101,.12)!important;border-color:#b9cbd7!important}
.ms-product-info h3,.ms-product-info strong{color:#17212b!important}.ms-product-category{color:var(--ms-accent)!important}.ms-product-info p{color:#64748b!important}
.ms-footer{background:#edf3f7!important;border-top:1px solid var(--ms-border)!important;color:#334155!important}.ms-footer p,.ms-footer a{color:#64748b!important}.ms-footer strong{color:#243746!important}.ms-footer-bottom{border-top-color:var(--ms-border)!important}
.ms-auth-page{background:var(--ms-bg)!important}.ms-auth-visual{background:radial-gradient(circle at 50% 45%,rgba(122,165,193,.23),transparent 32%),linear-gradient(145deg,#edf5f9,#e2edf3)!important}.ms-auth-panel{background:rgba(255,255,255,.96)!important}.ms-auth-panel h1{color:#14202b!important}.ms-auth-lead{color:#66798a!important}.ms-auth-form label{color:#526678!important}.ms-auth-form input{background:#f8fbfd!important;color:#17212b!important;border-color:#cfdde5!important;box-shadow:0 4px 15px rgba(50,76,93,.04)}.ms-auth-form input:focus{border-color:#7c9bb2!important;box-shadow:0 0 0 4px rgba(111,145,167,.13)!important}.ms-auth-submit{background:#213b4c!important;color:#fff!important;border-color:#213b4c!important}.ms-auth-switch{color:#64748b!important}.ms-auth-switch a{color:#2e5872!important;border-bottom-color:#8ba5b7!important}.ms-auth-choice h2{color:#17212b!important}.ms-auth-choice p{color:#64748b!important}.ms-auth-choice-action{color:#203746!important;border-bottom-color:#9bb2c0!important}.ms-auth-choice-number{color:#6f8ea5!important}
.ms-cart-card,.ms-checkout-card,.ms-order-card{background:var(--ms-surface)!important;border-color:var(--ms-border)!important;box-shadow:0 14px 35px rgba(47,70,85,.06)}
.ms-password-dots{letter-spacing:2px;color:#71869a}.ms-admin-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:650}.ms-admin-status.active{background:#e5f6ee;color:#19704e}.ms-admin-status.locked{background:#fdeaea;color:#a13c3c}.ms-admin-actions-cell{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.ms-admin-actions-cell form{margin:0}.ms-admin-alert{margin:0 0 14px;padding:12px 15px;border-radius:10px;font-size:14px}.ms-admin-alert.success{background:#e7f7ef;color:#146b4b;border:1px solid #bfe6d1}.ms-admin-alert.danger{background:#fff0f0;color:#a33e3e;border:1px solid #f0caca}.ms-admin-subtitle{color:#74818a;font-size:14px;margin-top:6px}
.ms-theme-editor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);gap:22px}.ms-theme-preview{min-height:480px;border-radius:20px;padding:48px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;box-shadow:0 20px 55px rgba(45,70,85,.1);position:relative}.ms-theme-preview:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-80px;background:rgba(255,255,255,.42);filter:blur(4px)}.ms-theme-preview-logo img{width:82px;height:82px;border-radius:50%;object-fit:cover;margin-bottom:26px;position:relative;z-index:1}.ms-theme-preview h2{font-size:clamp(38px,4vw,62px);line-height:.98;letter-spacing:-.055em;margin:16px 0;color:inherit;position:relative;z-index:1}.ms-theme-preview p{font-size:18px;color:inherit;opacity:.72;position:relative;z-index:1}.ms-theme-preview-button{border:0;color:#fff;padding:14px 20px;border-radius:10px;width:max-content;font-weight:700;margin-top:18px;position:relative;z-index:1}.ms-theme-editor input[type=color]{height:46px;width:100%;padding:3px;border:1px solid #d5e0e7;border-radius:10px;background:#fff}.ms-theme-editor input[type=range]{width:100%;accent-color:#4f6f8f}
.ms-admin-shell{background:#f6f8fb!important;color:#243746!important}.ms-admin-side{background:#10222f!important;border-right:1px solid #203847!important}.ms-admin-side a{color:#cbd9e2!important;display:flex!important;align-items:center;gap:10px}.ms-admin-side a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}.ms-side-icon{width:20px;text-align:center;color:#9fc0d3;font-size:17px}.ms-admin-main{background:#f6f8fb!important}.ms-admin-card{background:#fff!important;border-color:#dbe4eb!important;box-shadow:0 12px 35px rgba(43,67,83,.06)!important}.ms-admin-head h1{color:#17212b!important;font-size:36px!important}.ms-admin-table th{color:#526678!important}.ms-admin-table td{color:#243746!important;border-color:#edf1f4!important}.ms-admin-btn{background:#fff!important;color:#294457!important;border-color:#cbd9e2!important}.ms-admin-btn.primary{background:#294e68!important;color:#fff!important;border-color:#294e68!important}.ms-admin-btn.danger{color:#a13c3c!important;border-color:#efc4c4!important}
@media(max-width:900px){.ms-theme-editor{grid-template-columns:1fr}.ms-hero h1{font-size:clamp(48px,10vw,72px)!important}.ms-hero-copy p{font-size:17px!important;white-space:normal!important}.ms-nav{gap:16px!important}}

.ms-nav-icon,.ms-icon{font-family:'Material Icons'!important;font-size:20px!important;font-weight:400!important;vertical-align:middle}.ms-header-actions .ms-icon{font-size:19px!important}.ms-side-icon{font-family:'Material Icons'!important;font-size:20px!important;font-weight:400!important}.ms-admin-side a{font-size:15px!important;padding:13px 14px!important;border-radius:12px!important;margin-bottom:4px}.ms-admin-side a:hover .ms-side-icon{transform:translateY(-1px) scale(1.08);color:#b9d8ea}.ms-side-icon{transition:transform .2s ease,color .2s ease}


/* =========================================================
   MINIMAL STORE — VISUAL REFINEMENT 2026-09-22
   Theme variables are supplied by MainLayout and persisted in MS_WebTheme.
   ========================================================= */
.ms-site{font-size:calc(16px * var(--ms-font-scale,1));color:var(--ms-text,#17212b);background:var(--ms-bg,#f6f8fb);overflow:hidden}
.ms-site .ms-header{background:color-mix(in srgb,var(--ms-surface,#fff) 88%,transparent);border-bottom:1px solid var(--ms-border,#dbe4eb);box-shadow:0 8px 30px rgba(38,62,78,.06)}
.ms-site .ms-logo{color:var(--ms-text,#17212b)}
.ms-site .ms-logo span{color:var(--ms-muted,#64748b)}
.ms-site .ms-nav a,.ms-site .ms-header-actions{color:var(--ms-text,#17212b)}
.ms-site .ms-nav a:hover{color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-nav a:hover:after{background:var(--ms-accent,#4f6f8f);height:2px}
.ms-site .ms-hero{min-height:680px;background:radial-gradient(circle at 82% 40%,color-mix(in srgb,var(--ms-accent-soft,#dceaf5) 75%,transparent),transparent 28%),linear-gradient(120deg,var(--ms-hero-start,#f5f9fc),var(--ms-hero-end,#e9f1f6));color:var(--ms-text,#17212b);position:relative;isolation:isolate}
.ms-site .ms-hero:before{content:"";position:absolute;inset:-20% -10%;z-index:-1;background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.75),transparent 24%),radial-gradient(circle at 76% 72%,color-mix(in srgb,var(--ms-accent-soft,#dceaf5) 70%,transparent),transparent 25%);animation:ms-drift 12s ease-in-out infinite alternate}
.ms-site .ms-hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:54px;padding:78px 0}
.ms-site .ms-hero-copy{min-width:0;position:relative;z-index:2}
.ms-site .ms-eyebrow{color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-hero h1{color:var(--ms-text,#17212b);font-size:clamp(54px,5.6vw,88px);line-height:.98;letter-spacing:-.055em;max-width:780px;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.ms-site .ms-hero h1 span{display:block}
.ms-site .ms-hero-copy p{color:var(--ms-muted,#64748b);font-size:clamp(18px,1.25vw,21px);max-width:760px;white-space:nowrap;line-height:1.5}
.ms-site .ms-hero-actions .ms-btn{font-size:15px;min-height:54px;border-radius:12px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.ms-site .ms-btn-dark{background:var(--ms-accent,#4f6f8f);border-color:var(--ms-accent,#4f6f8f);color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--ms-accent,#4f6f8f) 22%,transparent)}
.ms-site .ms-btn-dark:hover{transform:translateY(-3px);box-shadow:0 18px 34px color-mix(in srgb,var(--ms-accent,#4f6f8f) 30%,transparent)}
.ms-site .ms-btn-light{color:var(--ms-text,#17212b);border-color:var(--ms-border,#dbe4eb);background:rgba(255,255,255,.55)}
.ms-site .ms-btn-light:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 28px rgba(38,62,78,.09)}
.ms-site .ms-hero-art{height:500px;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.ms-site .ms-hero-art:before,.ms-site .ms-hero-art:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ms-site .ms-hero-art:before{width:410px;height:410px;background:radial-gradient(circle,color-mix(in srgb,var(--ms-accent-soft,#dceaf5) 75%,transparent),transparent 68%);animation:ms-pulse 5s ease-in-out infinite}
.ms-site .ms-hero-art:after{width:300px;height:300px;border:1px solid color-mix(in srgb,var(--ms-accent,#4f6f8f) 22%,transparent);animation:ms-orbit 14s linear infinite}
.ms-site .ms-hero-logo{position:relative;z-index:2;width:min(330px,70%);height:auto;border-radius:50%;box-shadow:0 26px 60px rgba(33,57,72,.18);animation:ms-float 5s ease-in-out infinite}
.ms-site .ms-art-caption{position:absolute;right:2%;bottom:6%;z-index:3;color:color-mix(in srgb,var(--ms-accent,#4f6f8f) 55%,transparent);font-size:13px;letter-spacing:.28em;line-height:1.7}
.ms-site .ms-section{background:var(--ms-bg,#f6f8fb);color:var(--ms-text,#17212b)}
.ms-site .ms-section-head h2{color:var(--ms-text,#17212b);font-size:clamp(40px,3.2vw,52px)}
.ms-site .ms-section-head>a{color:var(--ms-accent,#4f6f8f);border-color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-product-card,.ms-site .ms-category-card,.ms-site .ms-auth-choice{background:var(--ms-surface,#fff);border-color:var(--ms-border,#dbe4eb);box-shadow:0 12px 35px rgba(43,67,83,.06);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.ms-site .ms-product-card:hover,.ms-site .ms-category-card:hover,.ms-site .ms-auth-choice:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(43,67,83,.13);border-color:color-mix(in srgb,var(--ms-accent,#4f6f8f) 35%,var(--ms-border,#dbe4eb))}
.ms-site .ms-product-info h3,.ms-site .ms-product-info strong{color:var(--ms-text,#17212b)}
.ms-site .ms-product-category{color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-strip{background:var(--ms-surface,#fff);border-block:1px solid var(--ms-border,#dbe4eb);box-shadow:0 8px 24px rgba(43,67,83,.04)}
.ms-site .ms-strip-grid div{font-size:15px;color:var(--ms-text,#17212b)}
.ms-site .ms-strip-grid strong{color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-footer{background:var(--ms-surface-soft,#eef4f8);border-top:1px solid var(--ms-border,#dbe4eb);color:var(--ms-text,#17212b)}
.ms-site .ms-footer p,.ms-site .ms-footer a{color:var(--ms-muted,#64748b)}
.ms-site .ms-nav-icon,.ms-site .ms-icon{transition:transform .22s ease,color .22s ease}
.ms-site a:hover .ms-nav-icon,.ms-site a:hover .ms-icon{transform:translateY(-2px) scale(1.08);color:var(--ms-accent,#4f6f8f)}
.ms-site .ms-header-actions{font-size:14px}
.ms-site .ms-header-actions a{display:inline-flex;align-items:center;gap:7px}
.ms-modal-backdrop{position:fixed;inset:0;background:rgba(19,35,46,.38);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:3000;animation:ms-fade .2s ease}
.ms-modal{width:min(520px,100%);background:#fff;border:1px solid #dbe4eb;border-radius:20px;padding:30px;box-shadow:0 30px 80px rgba(23,45,59,.22);animation:ms-modal-in .25s ease}
.ms-modal-icon{width:52px;height:52px;border-radius:16px;background:#e9f2f7;color:#365d75;display:grid;place-items:center;margin-bottom:14px}.ms-modal-icon .material-icons{font-size:26px}
.ms-modal h2{font-size:28px;color:#17212b;margin:0 0 8px}.ms-modal p{font-size:16px;line-height:1.6;color:#5f7180}.ms-reset-mail{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:#f4f8fa;color:#28485b;font-weight:650;margin:18px 0}.ms-modal-note{font-size:13px;color:#748696;line-height:1.5}.ms-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.ms-modal-actions form{margin:0}.ms-modal-actions button{display:inline-flex;align-items:center;gap:7px}
@keyframes ms-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ms-pulse{0%,100%{transform:scale(.96);opacity:.65}50%{transform:scale(1.04);opacity:1}}
@keyframes ms-orbit{to{transform:rotate(360deg)}}
@keyframes ms-drift{0%{transform:translate3d(-1%,0,0) scale(1)}100%{transform:translate3d(1%,1%,0) scale(1.03)}}
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
@keyframes ms-modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:1100px){.ms-site .ms-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);gap:28px}.ms-site .ms-hero h1{font-size:clamp(48px,5.7vw,76px)}.ms-site .ms-hero-copy p{white-space:normal}}
@media(max-width:800px){.ms-site .ms-hero{min-height:auto}.ms-site .ms-hero-grid{grid-template-columns:1fr;padding:58px 0}.ms-site .ms-hero-copy{order:1}.ms-site .ms-hero-art{order:2;height:360px}.ms-site .ms-hero-logo{width:250px}.ms-site .ms-hero h1{font-size:clamp(44px,11vw,68px)}.ms-site .ms-hero-copy p{font-size:17px}.ms-site .ms-nav{gap:14px}.ms-site .ms-nav a{font-size:13px}.ms-site .ms-header-inner{gap:14px}}



/* ================================================================
   MINIMAL STORE — VISUAL REFINEMENT 2 — 2026-09-22
   Palette follows the logo: charcoal / graphite / cool steel blue.
   Hero composition is locked so the brand mark stays vertically centered.
   ================================================================ */
:root{
  --ms-brand-ink:#293b47;
  --ms-brand-ink-2:#344b5a;
  --ms-brand-muted:#5d6f7c;
  --ms-brand-accent:#526f83;
  --ms-brand-soft:#dce6eb;
  --ms-brand-bg:#f4f7f8;
}

.ms-site{
  color:var(--ms-brand-ink)!important;
  background:var(--ms-brand-bg)!important;
}

/* Header: same visual language as the logo, without becoming too dark. */
.ms-site .ms-header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid #d8e1e6!important;
}
.ms-site .ms-logo{color:var(--ms-brand-ink)!important}
.ms-site .ms-logo span{color:#70808b!important}
.ms-site .ms-nav a,
.ms-site .ms-header-actions,
.ms-site .ms-header-actions a{color:#405565!important}
.ms-site .ms-nav a:hover,
.ms-site .ms-header-actions a:hover{color:var(--ms-brand-accent)!important}

/* HERO — fixed, balanced composition. */
.ms-site .ms-hero{
  min-height:650px!important;
  background:
    radial-gradient(circle at 82% 42%,rgba(82,111,131,.13),transparent 25%),
    radial-gradient(circle at 10% 92%,rgba(82,111,131,.07),transparent 27%),
    linear-gradient(125deg,#f7f9fa 0%,#eef3f5 55%,#e5ecef 100%)!important;
  color:var(--ms-brand-ink)!important;
  overflow:hidden!important;
}
.ms-site .ms-hero-grid{
  grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr)!important;
  gap:34px!important;
  align-items:center!important;
  min-height:650px!important;
  padding:52px 0!important;
}
.ms-site .ms-hero-copy{
  min-width:0!important;
  position:relative!important;
  z-index:4!important;
  padding-right:10px!important;
}
.ms-site .ms-eyebrow{
  color:var(--ms-brand-accent)!important;
}
.ms-site .ms-hero h1{
  color:var(--ms-brand-ink)!important;
  font-size:clamp(52px,5vw,82px)!important;
  line-height:.99!important;
  letter-spacing:-.052em!important;
  font-weight:760!important;
  max-width:800px!important;
  margin:18px 0 24px!important;
  text-shadow:none!important;
}
.ms-site .ms-hero h1 span{
  display:block!important;
  white-space:normal!important;
}
.ms-site .ms-hero-copy p{
  color:var(--ms-brand-muted)!important;
  font-size:18px!important;
  line-height:1.65!important;
  max-width:700px!important;
  white-space:normal!important;
}
.ms-site .ms-hero-actions{margin-top:32px!important}
.ms-site .ms-btn-dark{
  background:var(--ms-brand-accent)!important;
  border-color:var(--ms-brand-accent)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(55,78,92,.16)!important;
}
.ms-site .ms-btn-dark:hover{background:#435f72!important;transform:translateY(-2px)!important}
.ms-site .ms-btn-light{
  background:rgba(255,255,255,.72)!important;
  border-color:#aebfc9!important;
  color:var(--ms-brand-ink-2)!important;
}
.ms-site .ms-btn-light:hover{background:#fff!important;transform:translateY(-2px)!important}

/* The logo is centered inside its own right-hand stage — no bottom drift. */
.ms-site .ms-hero-art{
  height:520px!important;
  min-height:520px!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  min-width:0!important;
  z-index:1!important;
}
.ms-site .ms-hero-art:before{
  width:390px!important;
  height:390px!important;
  background:radial-gradient(circle,rgba(211,225,232,.72),rgba(211,225,232,0) 69%)!important;
  animation:ms-pulse 6s ease-in-out infinite!important;
}
.ms-site .ms-hero-art:after{
  width:315px!important;
  height:315px!important;
  border:1px solid rgba(82,111,131,.18)!important;
  animation:ms-orbit 18s linear infinite!important;
}
.ms-site .ms-hero-logo{
  position:relative!important;
  inset:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  width:300px!important;
  height:300px!important;
  max-width:72%!important;
  object-fit:cover!important;
  z-index:3!important;
  border-radius:50%!important;
  box-shadow:0 24px 55px rgba(40,59,70,.18)!important;
  animation:ms-float 6s ease-in-out infinite!important;
}
.ms-site .ms-art-caption{
  right:2%!important;
  bottom:15%!important;
  color:rgba(82,111,131,.72)!important;
  font-size:12px!important;
  letter-spacing:.30em!important;
}

/* Storefront sections keep the same palette. */
.ms-site .ms-section{background:var(--ms-brand-bg)!important;color:var(--ms-brand-ink)!important}
.ms-site .ms-section-head h2{color:var(--ms-brand-ink)!important}
.ms-site .ms-section-head>a{color:var(--ms-brand-accent)!important;border-color:#9fb1bd!important}
.ms-site .ms-product-card,
.ms-site .ms-category-card,
.ms-site .ms-auth-choice{
  background:#fff!important;
  border-color:#d8e1e6!important;
}
.ms-site .ms-product-info h3 a,
.ms-site .ms-product-info strong{color:var(--ms-brand-ink)!important}
.ms-site .ms-product-category{color:var(--ms-brand-accent)!important}
.ms-site .ms-strip{background:#fff!important;border-color:#d8e1e6!important}
.ms-site .ms-strip-grid div{color:var(--ms-brand-ink)!important}
.ms-site .ms-strip-grid strong{color:var(--ms-brand-accent)!important}
.ms-site .ms-footer{background:#e9eff2!important;border-color:#d4dfe5!important}
.ms-site .ms-footer p,.ms-site .ms-footer a{color:#61727e!important}
.ms-site .ms-footer strong{color:#334b5a!important}

/* Responsive: preserve the same visual hierarchy without forcing the logo down. */
@media(max-width:1100px){
  .ms-site .ms-hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.72fr)!important;gap:24px!important}
  .ms-site .ms-hero h1{font-size:clamp(48px,5.8vw,72px)!important}
  .ms-site .ms-hero-logo{width:270px!important;height:270px!important}
}
@media(max-width:800px){
  .ms-site .ms-hero{min-height:auto!important}
  .ms-site .ms-hero-grid{grid-template-columns:1fr!important;min-height:auto!important;padding:58px 0 30px!important}
  .ms-site .ms-hero-copy{order:1!important;padding-right:0!important}
  .ms-site .ms-hero-art{order:2!important;height:340px!important;min-height:340px!important}
  .ms-site .ms-hero-logo{width:235px!important;height:235px!important}
  .ms-site .ms-hero h1{font-size:clamp(44px,10.5vw,66px)!important}
  .ms-site .ms-hero-copy p{font-size:17px!important}
}
@media(max-width:560px){
  .ms-site .ms-hero-art{height:300px!important;min-height:300px!important}
  .ms-site .ms-hero-logo{width:205px!important;height:205px!important}
  .ms-site .ms-art-caption{right:4%!important;bottom:8%!important}
}


/* MINIMAL STORE — HERO LOGO GEOMETRY FIX */
.ms-site .ms-hero-art{
  align-items:center!important;
  justify-items:center!important;
  overflow:visible!important;
}
.ms-site .ms-hero-logo{
  display:block!important;
  width:300px!important;
  height:300px!important;
  min-width:300px!important;
  min-height:300px!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1 / 1!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:50%!important;
  flex:0 0 300px!important;
  transform:none!important;
}
@media(max-width:1100px){.ms-site .ms-hero-logo{width:270px!important;height:270px!important;min-width:270px!important;min-height:270px!important;flex-basis:270px!important}}
@media(max-width:800px){.ms-site .ms-hero-logo{width:235px!important;height:235px!important;min-width:235px!important;min-height:235px!important;flex-basis:235px!important}}
@media(max-width:560px){.ms-site .ms-hero-logo{width:205px!important;height:205px!important;min-width:205px!important;min-height:205px!important;flex-basis:205px!important}}

/* AUTH — forgot password link and recovery feedback */
.ms-auth-forgot{display:flex;justify-content:flex-end;margin:-8px 0 18px}
.ms-auth-forgot a{color:#526f84;font-size:14px;font-weight:700;text-decoration:none}
.ms-auth-forgot a:hover{text-decoration:underline}
.ms-form-success{margin:0 0 18px;padding:12px 14px;border:1px solid #b8d5c5;background:#eef8f2;color:#2f6247;border-radius:10px;font-size:14px;line-height:1.5}
.ms-label-optional{font-size:12px;font-weight:400;color:#7b8b96}
.ms-auth-form textarea{width:100%;resize:vertical;min-height:100px;border:1px solid #d5e0e6;border-radius:10px;padding:12px 13px;font:inherit;color:#263845;background:#fff;box-sizing:border-box}
.ms-auth-form textarea:focus{outline:none;border-color:#6b8799;box-shadow:0 0 0 3px rgba(82,111,131,.10)}


/* ================================================================
   MINIMAL STORE — THEME ENGINE FIX 2026-09-24
   All storefront colors below are driven by MS_WebTheme variables.
   This block intentionally uses !important because older legacy CSS
   in this project contains fixed !important colors.
   ================================================================ */
:root{
  --ms-brand-ink:#263944;
  --ms-brand-muted:#5c6f7b;
  --ms-brand-accent:#526f83;
}

.ms-site,
.ms-site *{box-sizing:border-box}
.ms-site{background:var(--ms-bg,#f3f6f8)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-header{background:var(--ms-surface,#fff)!important;border-color:var(--ms-border,#d6e0e5)!important}
.ms-site .ms-logo{color:var(--ms-text,#263944)!important}
.ms-site .ms-logo span{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-nav a,.ms-site .ms-header-actions,.ms-site .ms-header-actions a{color:var(--ms-text,#263944)!important}
.ms-site .ms-nav a:hover,.ms-site .ms-header-actions a:hover{color:var(--ms-accent,#526f83)!important}
.ms-site .ms-nav-icon,.ms-site .ms-icon{color:var(--ms-accent,#526f83)!important}

.ms-site .ms-hero{
  background:
    radial-gradient(circle at 84% 30%,color-mix(in srgb,var(--ms-accent-soft,#dceaf5) 82%,transparent),transparent 27%),
    linear-gradient(125deg,var(--ms-hero-start,#f8fafb),var(--ms-hero-end,#e7eef2))!important;
  color:var(--ms-text,#263944)!important;
}
.ms-site .ms-hero h1{color:var(--ms-text,#263944)!important}
.ms-site .ms-eyebrow{color:var(--ms-accent,#526f83)!important}
.ms-site .ms-hero-copy p{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-btn-dark{background:var(--ms-accent,#526f83)!important;border-color:var(--ms-accent,#526f83)!important;color:#fff!important}
.ms-site .ms-btn-light{background:var(--ms-surface,#fff)!important;border-color:var(--ms-border,#d6e0e5)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-btn-light:hover{background:var(--ms-surface-soft,#eef3f5)!important}
.ms-site .ms-hero-logo{width:300px!important;height:300px!important;min-width:300px!important;min-height:300px!important;max-width:300px!important;max-height:300px!important;aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;border-radius:50%!important;transform:none!important}

.ms-site .ms-section,.ms-site .ms-inner-page,.ms-site .ms-simple-page{background:var(--ms-bg,#f3f6f8)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-section-head h2,.ms-site .ms-inner-page h1,.ms-site .ms-detail-copy h1,.ms-site .ms-post-detail h1{color:var(--ms-text,#263944)!important}
.ms-site .ms-section-head p,.ms-site .ms-page-lead,.ms-site .ms-detail-copy p{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-filter-row{border-color:var(--ms-border,#d6e0e5)!important}
.ms-site .ms-filter-row a{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-filter-row a.active{color:var(--ms-accent,#526f83)!important;border-color:var(--ms-accent,#526f83)!important}

.ms-site .ms-product-card,.ms-site .ms-category-card,.ms-site .ms-auth-choice,
.ms-site .ms-cart-card,.ms-site .ms-checkout-card,.ms-site .ms-order-card,
.ms-site .ms-account-card{background:var(--ms-surface,#fff)!important;border-color:var(--ms-border,#d6e0e5)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-product-info h3,.ms-site .ms-product-info h3 a,.ms-site .ms-product-info strong,
.ms-site .ms-auth-choice h2,.ms-site .ms-cart-name,.ms-site .ms-checkout-total,
.ms-site .ms-account-info strong{color:var(--ms-text,#263944)!important}
.ms-site .ms-product-info p,.ms-site .ms-auth-choice p,.ms-site .ms-detail-copy p,.ms-site .ms-detail-content,
.ms-site .ms-post-content,.ms-site .ms-account-info{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-product-category,.ms-site .ms-detail-price{color:var(--ms-accent,#526f83)!important}
.ms-site .ms-detail-note{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-detail-note a{color:var(--ms-accent,#526f83)!important}
.ms-site .ms-detail-content h2,.ms-site .ms-detail-content h3{color:var(--ms-text,#263944)!important}

.ms-site .ms-strip{background:var(--ms-surface,#fff)!important;border-color:var(--ms-border,#d6e0e5)!important}
.ms-site .ms-strip-grid div{color:var(--ms-text,#263944)!important}
.ms-site .ms-strip-grid strong{color:var(--ms-accent,#526f83)!important}
.ms-site .ms-footer{background:var(--ms-surface-soft,#eef3f5)!important;border-color:var(--ms-border,#d6e0e5)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-footer p,.ms-site .ms-footer a{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-footer strong{color:var(--ms-text,#263944)!important}

.ms-site .ms-auth-page{background:var(--ms-bg,#f3f6f8)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-auth-panel,.ms-site .ms-auth-choice{background:var(--ms-surface,#fff)!important;color:var(--ms-text,#263944)!important}
.ms-site .ms-auth-panel h1{color:var(--ms-text,#263944)!important}
.ms-site .ms-auth-lead,.ms-site .ms-auth-switch{color:var(--ms-muted,#5c6f7b)!important}
.ms-site .ms-auth-form label{color:var(--ms-text,#263944)!important}
.ms-site .ms-auth-form input{background:var(--ms-surface,#fff)!important;color:var(--ms-text,#263944)!important;border-color:var(--ms-border,#d6e0e5)!important}
.ms-site .ms-auth-submit{background:var(--ms-accent,#526f83)!important;border-color:var(--ms-accent,#526f83)!important;color:#fff!important}
.ms-site .ms-auth-forgot a,.ms-site .ms-auth-switch a{color:var(--ms-accent,#526f83)!important}

/* Keep product images rectangular/square; the product URL itself is a separate data issue. */
.ms-site .ms-product-image img,.ms-site .ms-detail-image img{object-fit:contain!important;object-position:center center!important;background:var(--ms-surface-soft,#eef3f5)!important}

/* Admin theme editor: readable controls and clear contrast. */
.ms-admin-shell,.ms-admin-main{background:#f3f6f8!important;color:#263944!important}
.ms-theme-editor .ms-admin-card{background:#fff!important;color:#263944!important;border-color:#d6e0e5!important}
.ms-theme-editor h2{color:#263944!important}
.ms-theme-editor label{color:#344b5a!important;font-weight:650!important}
.ms-theme-editor input[type=color]{background:#fff!important;border-color:#c7d4dc!important}
.ms-theme-editor input[type=range]{accent-color:#526f83!important}
.ms-theme-preview{border:1px solid var(--ms-border,#d6e0e5)!important}

@media(max-width:1100px){.ms-site .ms-hero-logo{width:270px!important;height:270px!important;min-width:270px!important;min-height:270px!important;max-width:270px!important;max-height:270px!important}}
@media(max-width:800px){.ms-site .ms-hero-logo{width:235px!important;height:235px!important;min-width:235px!important;min-height:235px!important;max-width:235px!important;max-height:235px!important}}
@media(max-width:560px){.ms-site .ms-hero-logo{width:205px!important;height:205px!important;min-width:205px!important;min-height:205px!important;max-width:205px!important;max-height:205px!important}}

/* ================= MINIMAL STORE COMMERCE / VISUAL POLISH 2026-09-24 ================= */
.ms-site{font-size:calc(16px * var(--ms-font-scale,1));overflow-x:hidden}
.ms-site .ms-hero{position:relative;isolation:isolate;min-height:650px;background:linear-gradient(125deg,var(--ms-hero-start),var(--ms-hero-end))!important;color:var(--ms-text)!important}
.ms-site .ms-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr)!important;gap:40px!important;align-items:center!important;min-height:650px!important}
.ms-site .ms-hero-copy{max-width:760px!important;padding-right:10px!important}
.ms-site .ms-hero h1{font-size:clamp(52px,5.4vw,78px)!important;line-height:.98!important;letter-spacing:-.055em!important;max-width:760px!important;color:var(--ms-text)!important}
.ms-site .ms-hero h1 span{white-space:normal!important}
.ms-site .ms-hero-copy p{max-width:680px!important;white-space:normal!important;color:var(--ms-muted)!important}
.ms-site .ms-hero-art{position:relative!important;height:560px!important;min-height:560px!important;display:grid!important;place-items:center!important;overflow:visible!important}
.ms-site .ms-hero-logo-wrap{position:relative!important;width:360px!important;height:360px!important;display:grid!important;place-items:center!important;z-index:3}
.ms-site .ms-hero-logo{position:relative!important;inset:auto!important;width:300px!important;height:300px!important;min-width:300px!important;min-height:300px!important;max-width:300px!important;max-height:300px!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:contain!important;object-position:center!important;transform:none!important;border:0!important;box-shadow:0 26px 70px rgba(24,45,58,.20),0 0 0 16px rgba(255,255,255,.72)!important;animation:msFloat2 6s ease-in-out infinite!important}
.ms-site .ms-hero-orbit{position:absolute;border:1px solid rgba(82,111,131,.18);border-radius:50%;pointer-events:none}
.ms-site .ms-hero-orbit-a{width:390px;height:390px;animation:msSpin 20s linear infinite}
.ms-site .ms-hero-orbit-b{width:440px;height:440px;border-style:dashed;opacity:.55;animation:msSpinReverse 30s linear infinite}
.ms-site .ms-hero-pulse{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--ms-accent);right:34px;top:45px;box-shadow:0 0 0 0 rgba(82,111,131,.28);animation:msPulse 2.8s infinite}
.ms-site .ms-art-caption{right:2%!important;bottom:17%!important;color:var(--ms-accent)!important;opacity:.72!important}
.ms-site .ms-hero-tag{position:absolute;left:3%;bottom:13%;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--ms-border);background:rgba(255,255,255,.55);backdrop-filter:blur(10px);border-radius:999px;color:var(--ms-accent);font-size:10px;letter-spacing:.15em;font-weight:700}
.ms-site .ms-hero-tag .material-icons{font-size:15px}
.ms-site .ms-section{padding:88px 0!important}
.ms-site .ms-section-head{align-items:flex-end!important;margin-bottom:34px!important}
.ms-site .ms-section-head h2{color:var(--ms-text)!important}
.ms-site .ms-product-card,.ms-site .ms-category-card,.ms-site .ms-auth-choice{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important}
.ms-site .ms-product-card:hover,.ms-site .ms-category-card:hover,.ms-site .ms-auth-choice:hover{transform:translateY(-6px)!important;box-shadow:0 18px 45px rgba(30,50,64,.10)!important;border-color:var(--ms-accent)!important}
.ms-site .ms-product-image{background:var(--ms-surface-soft)!important;display:block!important;overflow:hidden!important}
.ms-site .ms-product-image img{transition:transform .5s ease!important}
.ms-site .ms-product-card:hover .ms-product-image img{transform:none!important}
.ms-site .ms-strip{background:var(--ms-surface)!important;border-color:var(--ms-border)!important}
.ms-site .ms-strip-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important}
.ms-site .ms-feature-item{display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;padding:26px 20px!important;border-right:1px solid var(--ms-border)!important}
.ms-site .ms-feature-item:last-child{border-right:0!important}
.ms-site .ms-feature-icon{font-size:22px!important;color:var(--ms-accent)!important}
.ms-site .ms-feature-item div{display:grid;gap:3px}
.ms-site .ms-feature-item strong{font-size:11px!important;color:var(--ms-accent)!important;letter-spacing:.12em}
.ms-site .ms-feature-item span:not(.material-icons){font-size:14px;color:var(--ms-text)!important}
.ms-site .ms-feature-item small{font-size:11px;color:var(--ms-muted)!important}
.ms-site .ms-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.ms-site .ms-category-card{position:relative!important;min-height:270px!important;overflow:hidden!important;padding:28px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(20,35,46,.62)),var(--cat-image) center/cover!important}
.ms-site .ms-category-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(12,24,33,.72));z-index:0}
.ms-site .ms-category-card>*{position:relative;z-index:1}
.ms-site .ms-category-card strong,.ms-site .ms-category-card span{color:#fff!important}
.ms-site .ms-category-card small{color:rgba(255,255,255,.76)!important;margin-top:5px}
.ms-site .ms-category-card>b{position:absolute;right:22px;top:22px;color:#fff!important;font-size:22px}
.ms-site .ms-category-icon{font-size:27px!important;margin-bottom:auto!important;color:#fff!important}
.ms-site .ms-footer{background:var(--ms-surface-soft)!important;border-color:var(--ms-border)!important}
.ms-site .ms-footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr!important;gap:50px!important}
.ms-site .ms-footer-grid>div:not(:first-child) a{display:block;margin:10px 0!important}
.ms-site .ms-footer-grid .material-icons{display:none!important}
.ms-site .ms-footer-bottom{border-color:var(--ms-border)!important}
.ms-site .ms-inner-page{min-height:70vh!important}
.ms-site .ms-detail{grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr)!important;gap:64px!important}
.ms-site .ms-detail-gallery{min-width:0}
.ms-site .ms-detail-image-main{position:relative!important;cursor:zoom-in!important;background:var(--ms-surface-soft)!important;border:1px solid var(--ms-border)!important;overflow:hidden!important}
.ms-site .ms-detail-image-main img{transition:transform .45s ease!important}
.ms-site .ms-detail-image-main:hover img{transform:scale(1.035)!important}
.ms-site .ms-image-zoom-hint{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.86);color:var(--ms-text);padding:8px 11px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:5px;opacity:.9}
.ms-site .ms-detail-thumbs{display:flex;gap:10px;overflow:auto;padding-top:12px}
.ms-site .ms-detail-thumb{flex:0 0 82px;width:82px;height:82px;padding:0;border:1px solid var(--ms-border);background:var(--ms-surface-soft);cursor:pointer;overflow:hidden}
.ms-site .ms-detail-thumb.active{border:2px solid var(--ms-accent)}
.ms-site .ms-detail-thumb img{width:100%;height:100%;object-fit:contain;object-position:center center;padding:4px;box-sizing:border-box}
.ms-site .ms-detail-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.ms-site .ms-detail-buy>span{color:var(--ms-muted)}
.ms-site .ms-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(9,18,24,.86);backdrop-filter:blur(12px);display:grid;place-items:center;padding:30px;cursor:zoom-out}
.ms-site .ms-lightbox img{max-width:min(92vw,1100px);max-height:88vh;object-fit:contain;box-shadow:0 30px 100px rgba(0,0,0,.45);cursor:default}
.ms-site .ms-lightbox-close{position:absolute;right:25px;top:18px;border:0;background:none;color:#fff;font-size:42px;cursor:pointer}
.ms-site .ms-contact-page{background:var(--ms-bg);color:var(--ms-text)}
.ms-site .ms-contact-head{max-width:760px;margin-bottom:42px}
.ms-site .ms-contact-head h1{font-size:64px;color:var(--ms-text)!important}
.ms-site .ms-contact-head p{font-size:18px;line-height:1.8;color:var(--ms-muted)}
.ms-site .ms-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ms-site .ms-contact-card{padding:30px;border:1px solid var(--ms-border);background:var(--ms-surface);min-height:200px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.ms-site .ms-contact-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(30,50,64,.10)}
.ms-site .ms-contact-card>.material-icons{font-size:28px;color:var(--ms-accent)}
.ms-site .ms-contact-card>span:not(.material-icons){font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ms-muted)}
.ms-site .ms-contact-card strong{font-size:19px;color:var(--ms-text);line-height:1.4}
.ms-site .ms-contact-card small{color:var(--ms-muted);line-height:1.6}
.ms-site .ms-contact-bottom{margin-top:16px;padding:38px;border:1px solid var(--ms-border);background:var(--ms-surface);display:flex;justify-content:space-between;gap:40px}
.ms-site .ms-contact-bottom h2{color:var(--ms-text)}
.ms-site .ms-contact-bottom p{color:var(--ms-muted)}
.ms-site .ms-contact-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ms-site .ms-contact-links a{color:var(--ms-accent);font-weight:650}
.ms-site .ms-auth-choice{position:relative;overflow:hidden}
.ms-site .ms-auth-choice:before{content:"";position:absolute;right:-35px;top:-35px;width:130px;height:130px;border:1px solid var(--ms-border);border-radius:50%;opacity:.6}
.ms-site .ms-auth-choice-number{display:flex!important;align-items:center;gap:8px!important;color:var(--ms-accent)!important}
.ms-site .ms-auth-choice-number:before{content:"";width:22px;height:1px;background:var(--ms-accent);display:block}
.ms-site .ms-auth-choice-action{transition:gap .25s ease,color .25s ease!important}
.ms-site .ms-auth-choice:hover .ms-auth-choice-action{gap:18px!important;color:var(--ms-accent)!important}

/* Product image fitting: never crop uploaded product artwork. */
.ms-admin-product-preview{width:140px!important;height:140px!important;object-fit:contain!important;object-position:center center!important;padding:8px!important;box-sizing:border-box!important;border-radius:12px!important;border:1px solid #d9e0e4!important;background:#f3f6f8!important;display:block!important}
.ms-admin-product-thumb{width:58px!important;height:58px!important;object-fit:contain!important;object-position:center center!important;padding:4px!important;box-sizing:border-box!important;border-radius:8px!important;background:#f3f6f8!important;display:block!important}
.ms-site .ms-product-image,.ms-site .ms-detail-image-main{display:flex!important;align-items:center!important;justify-content:center!important;background:var(--ms-surface-soft,#eef3f5)!important}
.ms-site .ms-product-image img{padding:18px!important;box-sizing:border-box!important}
.ms-site .ms-detail-image-main img{padding:24px!important;box-sizing:border-box!important}

/* Admin category/gallery visual helpers */
.ms-admin-category-thumb{width:64px!important;height:64px!important;object-fit:contain!important;object-position:center!important;padding:4px!important;box-sizing:border-box!important;border-radius:10px!important;border:1px solid #d6e0e5!important}
.ms-admin-category-preview{width:180px;height:120px;object-fit:contain;object-position:center;padding:6px;box-sizing:border-box;border-radius:12px;border:1px solid #d6e0e5;margin-top:12px}
.ms-admin-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}
.ms-admin-gallery-item{border:1px solid #d6e0e5;background:#fff;padding:8px;border-radius:10px}
.ms-admin-gallery-item img{width:100%;height:130px;object-fit:contain;object-position:center center;padding:6px;box-sizing:border-box;border-radius:7px;background:#eef3f5}
.ms-admin-gallery-item>div{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ms-admin-help,.ms-admin-muted{font-size:12px;color:#74818a}

/* Theme editor: show values and contrast clearly */
.ms-theme-preview{border-radius:22px!important;min-height:430px!important;padding:44px!important;display:flex;flex-direction:column;justify-content:center;overflow:hidden!important}
.ms-theme-preview h2{font-size:clamp(34px,4vw,58px)!important;line-height:1!important;letter-spacing:-.045em!important;margin:18px 0!important}
.ms-theme-preview p{font-size:16px!important;opacity:.82}
.ms-theme-preview-logo img{width:78px;height:78px;border-radius:50%;object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.ms-theme-preview-button{align-self:flex-start;color:#fff;border:0;border-radius:8px;padding:13px 20px;font-weight:700}

@keyframes msFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes msSpin{to{transform:rotate(360deg)}}
@keyframes msSpinReverse{to{transform:rotate(-360deg)}}
@keyframes msPulse{0%{box-shadow:0 0 0 0 rgba(82,111,131,.32)}70%{box-shadow:0 0 0 14px rgba(82,111,131,0)}100%{box-shadow:0 0 0 0 rgba(82,111,131,0)}}

@media(max-width:1100px){
 .ms-site .ms-hero-grid{grid-template-columns:minmax(0,1fr) minmax(330px,.75fr)!important;gap:18px!important}
 .ms-site .ms-hero-logo-wrap{width:320px!important;height:320px!important}.ms-site .ms-hero-logo{width:270px!important;height:270px!important;min-width:270px!important;min-height:270px!important;max-width:270px!important;max-height:270px!important}
 .ms-site .ms-category-grid{grid-template-columns:repeat(2,1fr)!important}.ms-admin-gallery-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:800px){
 .ms-site .ms-hero-grid{grid-template-columns:1fr!important;min-height:auto!important;padding:60px 0 35px!important}.ms-site .ms-hero-copy{order:1}.ms-site .ms-hero-art{order:2;height:390px!important;min-height:390px!important}.ms-site .ms-hero-logo-wrap{width:290px!important;height:290px!important}.ms-site .ms-hero-logo{width:235px!important;height:235px!important;min-width:235px!important;min-height:235px!important;max-width:235px!important;max-height:235px!important}.ms-site .ms-hero-orbit-a{width:310px;height:310px}.ms-site .ms-hero-orbit-b{width:350px;height:350px}.ms-site .ms-category-grid,.ms-site .ms-contact-grid{grid-template-columns:1fr 1fr!important}.ms-site .ms-strip-grid{grid-template-columns:1fr 1fr!important}.ms-site .ms-feature-item:nth-child(2){border-right:0}.ms-site .ms-feature-item{border-bottom:1px solid var(--ms-border)}.ms-site .ms-detail{grid-template-columns:1fr!important}.ms-site .ms-contact-bottom{flex-direction:column}.ms-admin-gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
 .ms-site .ms-hero h1{font-size:clamp(42px,12vw,58px)!important}.ms-site .ms-hero-art{height:320px!important;min-height:320px!important}.ms-site .ms-hero-logo-wrap{width:240px!important;height:240px!important}.ms-site .ms-hero-logo{width:195px!important;height:195px!important;min-width:195px!important;min-height:195px!important;max-width:195px!important;max-height:195px!important}.ms-site .ms-hero-orbit-a{width:250px;height:250px}.ms-site .ms-hero-orbit-b{width:280px;height:280px}.ms-site .ms-art-caption{right:0!important;bottom:5%!important}.ms-site .ms-hero-tag{left:0;bottom:4%}.ms-site .ms-category-grid,.ms-site .ms-contact-grid{grid-template-columns:1fr!important}.ms-site .ms-strip-grid{grid-template-columns:1fr!important}.ms-site .ms-feature-item{border-right:0!important}.ms-site .ms-contact-head h1{font-size:48px}.ms-admin-gallery-grid{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================
   MINIMAL STORE — HEADER NAVIGATION / PRODUCT MEGA DROPDOWN 2026-09-24
   Product categories belong under Sản phẩm. The top header stays one line.
   ================================================================ */
.ms-site .ms-header-inner{
    min-width:0;
    gap:18px!important;
}
.ms-site .ms-logo-wrap{
    flex:0 0 auto;
}
.ms-site .ms-nav{
    flex:1 1 auto;
    min-width:0;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    white-space:nowrap!important;
}
.ms-site .ms-nav-item{
    position:relative;
    display:flex;
    align-items:center;
    height:82px;
}
.ms-site .ms-nav-link{
    height:82px!important;
    padding:0 12px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    line-height:1!important;
    text-decoration:none!important;
}
.ms-site .ms-nav-link span:not(.material-icons){
    white-space:nowrap!important;
}
.ms-site .ms-products-trigger{cursor:pointer}
.ms-site .ms-nav-chevron{
    font-size:18px!important;
    margin-left:-2px!important;
    transition:transform .2s ease!important;
}
.ms-site .ms-products-menu:hover .ms-nav-chevron,
.ms-site .ms-products-menu:focus-within .ms-nav-chevron{
    transform:rotate(180deg)!important;
}

.ms-site .ms-nav-dropdown{
    position:absolute;
    top:calc(100% - 4px);
    left:50%;
    width:360px;
    transform:translate(-50%,8px);
    padding:12px;
    background:rgba(255,255,255,.98);
    border:1px solid var(--ms-border,#d6e0e5);
    border-radius:16px;
    box-shadow:0 24px 60px rgba(24,43,55,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
    z-index:300;
}
.ms-site .ms-nav-dropdown:before{
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    width:14px;
    height:14px;
    background:#fff;
    border-left:1px solid var(--ms-border,#d6e0e5);
    border-top:1px solid var(--ms-border,#d6e0e5);
    transform:translateX(-50%) rotate(45deg);
}
.ms-site .ms-products-menu:hover .ms-nav-dropdown,
.ms-site .ms-products-menu:focus-within .ms-nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}
.ms-site .ms-nav-dropdown-head{
    padding:8px 12px 10px;
    border-bottom:1px solid var(--ms-border,#d6e0e5);
}
.ms-site .ms-nav-dropdown-kicker{
    display:block;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.18em!important;
    color:var(--ms-accent,#526f83)!important;
}
.ms-site .ms-nav-dropdown-title{
    display:block;
    margin-top:4px;
    color:var(--ms-text,#263944)!important;
    font-size:14px!important;
    font-weight:700!important;
}
.ms-site .ms-nav-dropdown>a{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:48px;
    margin-top:3px;
    padding:8px 10px!important;
    border-radius:11px;
    color:var(--ms-text,#263944)!important;
    text-decoration:none!important;
    transition:background .16s ease,transform .16s ease,color .16s ease;
}
.ms-site .ms-nav-dropdown>a:hover{
    background:var(--ms-accent-soft,#dce6eb)!important;
    color:var(--ms-accent,#526f83)!important;
    transform:translateX(3px)!important;
}
.ms-site .ms-nav-dropdown>a>.material-icons:first-child{
    flex:0 0 22px;
    width:22px;
    font-size:20px!important;
    color:var(--ms-accent,#526f83)!important;
}
.ms-site .ms-nav-dropdown .ms-nav-dropdown-arrow{
    margin-left:auto;
    font-size:17px!important;
    color:var(--ms-muted,#5c6f7b)!important;
}
.ms-site .ms-nav-category-copy{
    min-width:0;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
}
.ms-site .ms-nav-category-copy b{
    font-size:13px!important;
    line-height:1.2!important;
    color:var(--ms-text,#263944)!important;
}
.ms-site .ms-nav-category-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:255px;
    font-size:10px!important;
    line-height:1.2!important;
    color:var(--ms-muted,#5c6f7b)!important;
}
.ms-site .ms-nav-dropdown-all{
    margin-bottom:5px!important;
    border-bottom:1px solid var(--ms-border,#d6e0e5);
    border-radius:0!important;
    padding-bottom:11px!important;
}
.ms-site .ms-header-actions{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    white-space:nowrap!important;
}
.ms-site .ms-header-actions a{
    white-space:nowrap!important;
}

@media(max-width:1180px){
    .ms-site .ms-header-inner{gap:10px!important}
    .ms-site .ms-nav-link{padding:0 8px!important;font-size:13px!important}
    .ms-site .ms-header-actions{gap:8px!important;font-size:13px!important}
    .ms-site .ms-header-actions a{gap:4px!important}
    .ms-site .ms-logo{font-size:18px!important}
    .ms-site .ms-logo-mark{width:46px!important;height:46px!important}
}
@media(max-width:980px){
    .ms-site .ms-header-inner{height:72px!important}
    .ms-site .ms-nav{display:none!important}
    .ms-site .ms-header-actions a[aria-label="Đăng nhập"],
    .ms-site .ms-header-actions a[aria-label="Đăng ký"],
    .ms-site .ms-header-actions a[aria-label="Tài khoản"],
    .ms-site .ms-header-actions a[aria-label="Đăng xuất"]{font-size:0!important}
    .ms-site .ms-header-actions .ms-icon{font-size:20px!important}
}


/* PRODUCT PAGINATION — 2026-09-24 */
.ms-product-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:38px 0 8px;padding:0;}
.ms-product-pagination button{font:inherit;cursor:pointer;transition:all .2s ease;}
.ms-page-number,.ms-page-arrow{min-width:40px;height:40px;border:1px solid var(--ms-border,#d6e0e5);background:var(--ms-surface,#fff);color:var(--ms-text,#263944);display:inline-flex;align-items:center;justify-content:center;border-radius:10px;}
.ms-page-number:hover:not(.active),.ms-page-arrow:hover:not(:disabled){border-color:var(--ms-accent,#526f83);color:var(--ms-accent,#526f83);transform:translateY(-2px);}
.ms-page-number.active{background:var(--ms-accent,#526f83);border-color:var(--ms-accent,#526f83);color:#fff;box-shadow:0 8px 20px rgba(38,57,68,.16);}
.ms-page-arrow:disabled{opacity:.35;cursor:not-allowed;}
@media(max-width:700px){.ms-product-pagination{gap:6px;margin-top:28px}.ms-page-number,.ms-page-arrow{min-width:36px;height:36px;border-radius:9px}}

/* ================================================================
   MINIMAL STORE — RESPONSIVE / MOBILE / TABLET SYSTEM 2026-09-24
   ================================================================ */
.ms-site,.ms-site *{box-sizing:border-box}
.ms-site{width:100%;max-width:100%;overflow-x:clip}
.ms-site img{max-width:100%;height:auto}
.ms-site .ms-container{width:min(100% - 40px,1240px);margin-inline:auto}
.ms-site .ms-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ms-site .ms-product-card{min-width:0;overflow:hidden}
.ms-site .ms-product-image{display:block;aspect-ratio:1/1;overflow:hidden}
.ms-site .ms-product-image img{display:block;width:100%;height:100%;object-fit:contain!important;object-position:center center!important;padding:12px;transform:none!important;background:var(--ms-surface-soft,#eef3f5)}
.ms-site .ms-product-info{min-width:0}
.ms-site .ms-product-info h3,.ms-site .ms-product-info h3 a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-site .ms-product-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ms-site .ms-product-pagination{flex-wrap:wrap}
.ms-site .ms-mobile-actions,.ms-site .ms-mobile-menu{display:none}
.ms-site .ms-header-action-label{display:inline}

@media (max-width:1180px){
 .ms-site .ms-container{width:min(100% - 36px,1100px)}
 .ms-site .ms-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .ms-site .ms-section{padding-block:64px}
}

@media (max-width:980px){
 .ms-site .ms-container{width:min(100% - 32px,860px)}
 .ms-site .ms-header-inner{position:relative;height:70px!important;min-height:70px}
 .ms-site .ms-nav{display:none!important}
 .ms-site .ms-header-actions{display:none!important}
 .ms-site .ms-mobile-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
 .ms-site .ms-mobile-actions>a,.ms-site .ms-mobile-menu-btn{width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--ms-text,#263944);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
 .ms-site .ms-mobile-actions>a:active,.ms-site .ms-mobile-menu-btn:active{background:var(--ms-accent-soft,#e8eef1)}
 .ms-site .ms-mobile-actions .material-icons{font-size:22px}
 .ms-site .ms-mobile-actions b{position:absolute;right:1px;top:1px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--ms-accent,#526f83);color:#fff;font-size:9px;line-height:1}
 .ms-site .ms-logo-wrap{min-width:0}
 .ms-site .ms-logo{font-size:18px!important}
 .ms-site .ms-logo-mark{width:44px!important;height:44px!important}
 .ms-site .ms-mobile-menu{position:absolute;left:12px;right:12px;top:calc(100% + 8px);z-index:500;display:block;padding:10px;background:rgba(255,255,255,.985);border:1px solid var(--ms-border,#d6e0e5);border-radius:18px;box-shadow:0 24px 70px rgba(24,43,55,.20);backdrop-filter:blur(18px)}
 .ms-site .ms-mobile-menu-link,.ms-site .ms-mobile-menu-account a{min-height:48px;padding:11px 12px;border-radius:11px;display:flex;align-items:center;gap:11px;color:var(--ms-text,#263944);text-decoration:none;font-weight:650}
 .ms-site .ms-mobile-menu-link .material-icons,.ms-site .ms-mobile-menu-account .material-icons{font-size:20px;color:var(--ms-accent,#526f83)}
 .ms-site .ms-mobile-menu-link:active,.ms-site .ms-mobile-menu-account a:active{background:var(--ms-accent-soft,#e8eef1)}
 .ms-site .ms-mobile-menu-section{margin:4px 0;padding:7px 0;border-block:1px solid var(--ms-border,#d6e0e5)}
 .ms-site .ms-mobile-menu-title{display:flex;align-items:center;gap:11px;padding:10px 12px 7px;color:var(--ms-text,#263944);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}
 .ms-site .ms-mobile-menu-all{background:var(--ms-accent-soft,#e8eef1)}
 .ms-site .ms-mobile-menu-category{padding-left:43px;min-height:44px;font-size:14px;font-weight:550}
 .ms-site .ms-mobile-menu-account{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding-top:6px}
 .ms-site .ms-mobile-menu-account a{justify-content:center;border:1px solid var(--ms-border,#d6e0e5);font-size:13px}
 .ms-site .ms-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .ms-site .ms-product-card{border-radius:12px}
 .ms-site .ms-product-info{padding:13px 12px 14px}
 .ms-site .ms-product-info h3{font-size:17px}
 .ms-site .ms-product-category{font-size:10px}
 .ms-site .ms-add{width:38px;height:38px;min-width:38px}
 .ms-site .ms-section-head{gap:20px}
 .ms-site .ms-section-head h2{font-size:clamp(34px,6vw,52px)}
 .ms-site .ms-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}

@media (max-width:600px){
 .ms-site .ms-container{width:calc(100% - 24px)}
 .ms-site .ms-header-inner{height:62px!important;min-height:62px;padding-inline:0!important}
 .ms-site .ms-logo{font-size:16px!important;letter-spacing:.04em!important}
 .ms-site .ms-logo-mark{width:40px!important;height:40px!important}
 .ms-site .ms-mobile-actions>a,.ms-site .ms-mobile-menu-btn{width:38px;height:38px;border-radius:10px}
 .ms-site .ms-mobile-actions{gap:1px}
 .ms-site .ms-mobile-menu{left:0;right:0;top:calc(100% + 6px);border-radius:15px}
 .ms-site .ms-hero{min-height:auto!important}
 .ms-site .ms-hero-grid{padding:48px 0 28px!important;gap:8px!important}
 .ms-site .ms-hero-copy{padding:0!important}
 .ms-site .ms-hero h1{font-size:clamp(40px,12vw,58px)!important;line-height:.98!important}
 .ms-site .ms-hero-copy p{font-size:15px!important;line-height:1.65!important;margin-top:18px}
 .ms-site .ms-hero-actions{display:grid!important;grid-template-columns:1fr;gap:10px!important;margin-top:24px!important}
 .ms-site .ms-hero-actions .ms-btn{width:100%;justify-content:center;min-height:48px}
 .ms-site .ms-hero-art{height:315px!important;min-height:315px!important;margin-top:4px}
 .ms-site .ms-hero-logo-wrap{width:238px!important;height:238px!important}
 .ms-site .ms-hero-logo{width:192px!important;height:192px!important;min-width:192px!important;min-height:192px!important;max-width:192px!important;max-height:192px!important}
 .ms-site .ms-hero-orbit-a{width:250px!important;height:250px!important}
 .ms-site .ms-hero-orbit-b{width:280px!important;height:280px!important}
 .ms-site .ms-art-caption{right:0!important;bottom:3%!important;font-size:9px!important}
 .ms-site .ms-hero-tag{left:0!important;bottom:3%!important;font-size:8px!important;padding:8px 10px!important}
 .ms-site .ms-section{padding-block:48px}
 .ms-site .ms-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px}
 .ms-site .ms-section-head h2{font-size:clamp(32px,10vw,46px)!important;line-height:1!important;margin-top:8px!important}
 .ms-site .ms-section-head>a{font-size:11px;white-space:nowrap;padding-bottom:3px}
 .ms-site .ms-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .ms-site .ms-product-card{box-shadow:0 10px 26px rgba(24,43,55,.07)!important}
 .ms-site .ms-product-image{aspect-ratio:1/1}
 .ms-site .ms-product-info{padding:10px 10px 11px!important}
 .ms-site .ms-product-category{font-size:9px!important;letter-spacing:.12em!important;margin-bottom:5px}
 .ms-site .ms-product-info h3,.ms-site .ms-product-info h3 a{font-size:14px!important;line-height:1.25!important}
 .ms-site .ms-product-bottom{margin-top:10px!important}
 .ms-site .ms-product-bottom strong{font-size:13px!important}
 .ms-site .ms-add{width:34px!important;height:34px!important;min-width:34px!important;font-size:19px!important}
 .ms-site .ms-badge{font-size:8px!important;padding:6px 7px!important}
 .ms-site .ms-product-pagination{gap:5px!important;margin:28px 0 0!important}
 .ms-site .ms-page-number,.ms-site .ms-page-arrow{min-width:34px!important;height:34px!important;border-radius:9px!important;font-size:12px!important}
 .ms-site .ms-strip-grid{grid-template-columns:1fr!important}
 .ms-site .ms-feature-item{padding:18px 0!important;border-right:0!important}
 .ms-site .ms-category-grid{grid-template-columns:1fr!important;gap:10px!important}
 .ms-site .ms-category-card{min-height:145px!important;padding:20px!important}
 .ms-site .ms-footer-grid{grid-template-columns:1fr!important;gap:26px}
 .ms-site .ms-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
 .ms-site .ms-inner-page{padding-block:42px!important}
 .ms-site .ms-inner-page h1{font-size:clamp(38px,11vw,54px)!important;line-height:1!important}
 .ms-site .ms-page-lead{font-size:14px!important;line-height:1.6!important}
 .ms-site .ms-filter-row{display:flex!important;gap:8px!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:8px!important;scrollbar-width:none}
 .ms-site .ms-filter-row::-webkit-scrollbar{display:none}
 .ms-site .ms-filter-row a{flex:0 0 auto!important;padding:10px 12px!important;border-radius:999px!important;border:1px solid var(--ms-border)!important}
 .ms-site .ms-filter-row a.active{background:var(--ms-accent)!important;color:#fff!important;border-color:var(--ms-accent)!important}
 .ms-site .ms-detail,.ms-site .ms-detail-buy,.ms-site .ms-detail-content,.ms-site .ms-checkout-grid,.ms-site .ms-account-grid{grid-template-columns:1fr!important}
 .ms-site .ms-detail-image-main{aspect-ratio:1/1!important}
 .ms-site .ms-cart-item{grid-template-columns:76px minmax(0,1fr)!important}
 .ms-site .ms-cart-summary{position:static!important}
 .ms-site .ms-auth-two-col{grid-template-columns:1fr!important}
 .ms-site .ms-nav-dropdown{display:none!important}
}

@media (max-width:380px){
 .ms-site .ms-container{width:calc(100% - 20px)}
 .ms-site .ms-logo{font-size:14px!important}
 .ms-site .ms-logo-mark{width:36px!important;height:36px!important}
 .ms-site .ms-mobile-actions>a,.ms-site .ms-mobile-menu-btn{width:35px;height:35px}
 .ms-site .ms-mobile-actions .material-icons{font-size:20px}
 .ms-site .ms-hero h1{font-size:39px!important}
 .ms-site .ms-product-grid{gap:8px}
 .ms-site .ms-product-info{padding:9px 8px 10px!important}
 .ms-site .ms-product-bottom strong{font-size:12px!important}
}

@media (max-width:900px) and (orientation:landscape){
 .ms-site .ms-hero-grid{grid-template-columns:1fr 1fr!important;align-items:center!important;padding:34px 0!important}
 .ms-site .ms-hero-copy{order:1!important}
 .ms-site .ms-hero-art{order:2!important;height:300px!important;min-height:300px!important;margin:0!important}
 .ms-site .ms-hero h1{font-size:clamp(34px,7vw,52px)!important}
 .ms-site .ms-hero-actions{display:flex!important;flex-wrap:wrap}
 .ms-site .ms-hero-actions .ms-btn{width:auto!important}
}

@media (prefers-reduced-motion:reduce){
 .ms-site *,.ms-site *::before,.ms-site *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* PREMIUM HERO VISUAL — Minimal Store 2026-09-24
   CSS-only visual system: energy rings, radar sweep, orbit nodes, particles,
   glass halo and moving reflection. No replacement of the original logo asset. */
.ms-site .ms-hero-art-premium{isolation:isolate;overflow:visible;display:grid;place-items:center;perspective:900px}
.ms-site .ms-hero-art-premium::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(82,111,131,.16) 0,rgba(82,111,131,.08) 22%,rgba(82,111,131,.03) 43%,transparent 67%);filter:blur(10px);animation:msHeroBreathe 5.5s ease-in-out infinite;z-index:0}
.ms-site .ms-hero-art-premium::after{content:"";position:absolute;width:62%;height:18%;left:19%;top:41%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),rgba(120,164,192,.20),transparent);filter:blur(14px);opacity:.55;transform:rotate(-18deg);animation:msHeroSweep 5.8s ease-in-out infinite;z-index:4;pointer-events:none}
.ms-site .ms-hero-atmosphere{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,transparent 0 45%,rgba(255,255,255,.22) 46%,transparent 47%),radial-gradient(circle,rgba(255,255,255,.30) 0 1px,transparent 2px);background-size:100% 100%,28px 28px;mask-image:radial-gradient(circle,black 0 60%,transparent 78%);opacity:.6;animation:msHeroAtmosphere 12s linear infinite;z-index:0;pointer-events:none}
.ms-site .ms-hero-orbit{z-index:1!important}
.ms-site .ms-hero-orbit-a{width:390px!important;height:390px!important;border:1px solid rgba(82,111,131,.25)!important;box-shadow:inset 0 0 18px rgba(82,111,131,.05),0 0 30px rgba(82,111,131,.08);animation:msSpin 18s linear infinite!important}
.ms-site .ms-hero-orbit-a::before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#6f91aa;box-shadow:0 0 0 5px rgba(111,145,170,.10),0 0 20px rgba(111,145,170,.72);left:12%;top:8%;animation:msNodeGlow 2.6s ease-in-out infinite}
.ms-site .ms-hero-orbit-a::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);right:15%;bottom:10%}
.ms-site .ms-hero-orbit-b{width:440px!important;height:440px!important;border:1px dashed rgba(82,111,131,.20)!important;opacity:.85!important;animation:msSpinReverse 27s linear infinite!important}
.ms-site .ms-hero-orbit-b::before{content:"";position:absolute;inset:13px;border:1px solid rgba(255,255,255,.48);border-radius:50%;mask-image:linear-gradient(90deg,black 0 17%,transparent 17% 32%,black 32% 52%,transparent 52% 68%,black 68%);opacity:.65}
.ms-site .ms-hero-orbit-c{width:330px!important;height:330px!important;border:1px solid rgba(82,111,131,.16)!important;animation:msSpin 11s linear infinite!important;z-index:2!important}
.ms-site .ms-hero-orbit-c::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#526f83;box-shadow:0 0 15px rgba(82,111,131,.9);left:50%;top:-3px}
.ms-site .ms-hero-energy-ring{position:absolute;width:316px;height:316px;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,transparent 0 18%,rgba(82,111,131,.05) 25%,#6d8da4 33%,transparent 39% 63%,rgba(82,111,131,.34) 72%,transparent 79% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:msEnergySpin 4.8s linear infinite;z-index:3;filter:drop-shadow(0 0 8px rgba(82,111,131,.34));pointer-events:none}
.ms-site .ms-hero-inner-ring{position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(255,255,255,.85);box-shadow:0 0 0 7px rgba(255,255,255,.24),0 0 40px rgba(82,111,131,.14),inset 0 0 30px rgba(82,111,131,.10);z-index:1;pointer-events:none}
.ms-site .ms-hero-logo-wrap::before{content:"";position:absolute;inset:-32px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.76) 0 54%,rgba(255,255,255,.34) 55%,transparent 70%);filter:blur(2px);z-index:-1;animation:msHaloPulse 4.2s ease-in-out infinite}
.ms-site .ms-hero-logo-wrap::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(82,111,131,.22);box-shadow:0 0 0 14px rgba(82,111,131,.035),0 0 0 30px rgba(82,111,131,.025);z-index:0;pointer-events:none}
.ms-site .ms-hero-logo{z-index:2!important;box-shadow:0 28px 65px rgba(24,45,58,.22),0 0 0 9px rgba(255,255,255,.78),0 0 48px rgba(82,111,131,.18)!important;animation:msFloat2 6s ease-in-out infinite,msLogoGlow 4s ease-in-out infinite!important}
.ms-site .ms-hero-reflection{position:absolute;inset:12%;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.0) 43%,rgba(255,255,255,.72) 49%,rgba(255,255,255,.0) 55%,transparent 62%);mix-blend-mode:screen;opacity:.45;z-index:4;pointer-events:none;animation:msLogoReflection 5.5s ease-in-out infinite}
.ms-site .ms-hero-scan{position:absolute;width:52%;height:1px;left:24%;top:50%;background:linear-gradient(90deg,transparent,rgba(82,111,131,.0),rgba(82,111,131,.5),rgba(255,255,255,.85),rgba(82,111,131,.0),transparent);box-shadow:0 0 14px rgba(82,111,131,.35);opacity:.55;z-index:5;transform-origin:center;animation:msScanLine 4.2s ease-in-out infinite;pointer-events:none}
.ms-site .ms-hero-pulse{z-index:7!important;width:12px!important;height:12px!important;right:28px!important;top:31px!important;background:#6e91aa!important;box-shadow:0 0 0 0 rgba(82,111,131,.42),0 0 18px rgba(82,111,131,.65)!important;animation:msPulse 2.4s infinite!important}
.ms-site .ms-hero-particles{position:absolute;inset:0;z-index:6;pointer-events:none}
.ms-site .ms-hero-particles::before{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#7895aa;left:12%;top:22%;box-shadow:34px 76px 0 rgba(82,111,131,.65),82px -20px 0 rgba(82,111,131,.35),145px 120px 0 rgba(82,111,131,.45),215px 44px 0 rgba(82,111,131,.50),282px 150px 0 rgba(82,111,131,.35),345px 74px 0 rgba(82,111,131,.55),250px -8px 0 rgba(82,111,131,.35);animation:msParticleDrift 8s ease-in-out infinite}
.ms-site .ms-hero-particles::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.9);left:21%;top:69%;box-shadow:110px -165px 0 rgba(255,255,255,.65),270px -92px 0 rgba(255,255,255,.55),355px 32px 0 rgba(255,255,255,.45);filter:drop-shadow(0 0 7px rgba(255,255,255,.8));animation:msParticleTwinkle 3.2s ease-in-out infinite}
.ms-site .ms-art-caption{z-index:8!important;text-shadow:0 0 16px rgba(82,111,131,.18)}
.ms-site .ms-hero-tag{z-index:9!important;box-shadow:0 8px 24px rgba(40,60,74,.08)}
@keyframes msHeroBreathe{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.04);opacity:1}}
@keyframes msHeroSweep{0%,100%{transform:translateX(-38%) rotate(-18deg);opacity:0}35%{opacity:.7}65%{opacity:.35}100%{transform:translateX(38%) rotate(-18deg)}}
@keyframes msHeroAtmosphere{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.03)}100%{transform:rotate(360deg) scale(1)}}
@keyframes msEnergySpin{to{transform:rotate(360deg)}}
@keyframes msHaloPulse{0%,100%{transform:scale(.98);opacity:.65}50%{transform:scale(1.05);opacity:1}}
@keyframes msLogoGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(82,111,131,0))}50%{filter:drop-shadow(0 0 13px rgba(82,111,131,.25))}}
@keyframes msLogoReflection{0%,100%{transform:translateX(-14%) rotate(0deg);opacity:0}30%{opacity:.15}55%{opacity:.5}75%{opacity:0;transform:translateX(14%) rotate(0deg)}}
@keyframes msScanLine{0%,100%{transform:scaleX(.45) translateY(-78px);opacity:0}28%{opacity:.55}50%{transform:scaleX(1) translateY(0);opacity:.7}72%{opacity:.3}100%{transform:scaleX(.45) translateY(78px);opacity:0}}
@keyframes msNodeGlow{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.35);opacity:1}}
@keyframes msParticleDrift{0%,100%{transform:translate(0,0);opacity:.45}50%{transform:translate(8px,-10px);opacity:1}}
@keyframes msParticleTwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:900px){
 .ms-site .ms-hero-orbit-a{width:330px!important;height:330px!important}.ms-site .ms-hero-orbit-b{width:370px!important;height:370px!important}.ms-site .ms-hero-orbit-c{width:278px!important;height:278px!important}.ms-site .ms-hero-energy-ring{width:268px!important;height:268px!important}
}
@media(max-width:600px){
 .ms-site .ms-hero-atmosphere{inset:5%;opacity:.45}.ms-site .ms-hero-orbit-a{width:250px!important;height:250px!important}.ms-site .ms-hero-orbit-b{width:280px!important;height:280px!important}.ms-site .ms-hero-orbit-c{width:214px!important;height:214px!important}.ms-site .ms-hero-energy-ring{width:206px!important;height:206px!important}.ms-site .ms-hero-inner-ring{inset:-13px}.ms-site .ms-hero-logo-wrap::before{inset:-22px}.ms-site .ms-hero-reflection{inset:10%}.ms-site .ms-hero-scan{width:58%;left:21%}.ms-site .ms-hero-particles{transform:scale(.8)}
}
@media (prefers-reduced-motion:reduce){.ms-site .ms-hero-art-premium::before,.ms-site .ms-hero-art-premium::after,.ms-site .ms-hero-atmosphere,.ms-site .ms-hero-orbit,.ms-site .ms-hero-energy-ring,.ms-site .ms-hero-logo-wrap::before,.ms-site .ms-hero-logo,.ms-site .ms-hero-reflection,.ms-site .ms-hero-scan,.ms-site .ms-hero-particles::before,.ms-site .ms-hero-particles::after{animation:none!important}}

/* PRODUCT IMAGE ALIGNMENT — preserve full product, never crop */
.ms-site .ms-product-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:var(--ms-surface-soft,#eef3f5)!important;
}
.ms-site .ms-product-image img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:12px!important;
  transform:none!important;
  display:block!important;
}
.ms-site .ms-product-card:hover .ms-product-image img{
  transform:none!important;
}
@media(max-width:700px){
  .ms-site .ms-product-image img{padding:8px!important}
}


/* MINIMAL STORE SEARCH — 2026-09-24 */
.ms-site .ms-search-trigger,.ms-site .ms-mobile-search-btn{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;padding:0;display:inline-flex;align-items:center;gap:7px;}
.ms-site .ms-search-trigger:hover,.ms-site .ms-mobile-search-btn:hover{color:var(--ms-accent,#526f83);}
.ms-site .ms-search-panel{position:absolute;left:0;right:0;top:100%;padding:14px 20px 18px;background:color-mix(in srgb,var(--ms-surface,#fff) 96%,transparent);border-top:1px solid var(--ms-border,#d6e0e5);border-bottom:1px solid var(--ms-border,#d6e0e5);box-shadow:0 18px 35px rgba(38,57,68,.12);z-index:99;}
.ms-site .ms-search-form{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--ms-surface-soft,#eef3f5);border:1px solid var(--ms-border,#d6e0e5);border-radius:14px;padding:7px 8px 7px 14px;}
.ms-site .ms-search-panel-icon{color:var(--ms-accent,#526f83);font-size:22px;}
.ms-site .ms-search-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ms-text,#263944);font:inherit;font-size:15px;padding:11px 4px;}
.ms-site .ms-search-form input::placeholder{color:var(--ms-muted,#5c6f7b);}
.ms-site .ms-search-submit{border:0;border-radius:10px;background:var(--ms-accent,#526f83);color:#fff;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer;}
.ms-site .ms-search-submit:hover{filter:brightness(.94);}
.ms-site .ms-search-close{border:0;background:transparent;color:var(--ms-muted,#5c6f7b);cursor:pointer;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;}
.ms-site .ms-search-close:hover{background:var(--ms-surface,#fff);color:var(--ms-text,#263944);}
.ms-site .ms-mobile-actions{display:none;}
.ms-site .ms-search-empty{padding:70px 20px;text-align:center;border:1px dashed var(--ms-border,#d6e0e5);border-radius:18px;margin:30px 0;}
.ms-site .ms-search-empty .material-icons{font-size:46px;color:var(--ms-accent,#526f83);}
.ms-site .ms-search-empty h2{margin:12px 0 6px;color:var(--ms-text,#263944);}
.ms-site .ms-search-empty p{color:var(--ms-muted,#5c6f7b);margin:0 0 20px;}
@media(max-width:900px){.ms-site .ms-header-actions{display:none!important}.ms-site .ms-mobile-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.ms-site .ms-mobile-search-btn{width:40px;height:40px;justify-content:center;color:var(--ms-accent,#526f83);}.ms-site .ms-search-panel{padding:10px 14px 14px;}.ms-site .ms-search-form{gap:6px;padding-left:10px}.ms-site .ms-search-submit{padding:10px 12px;font-size:13px}.ms-site .ms-search-form input{font-size:14px}}
@media(max-width:480px){.ms-site .ms-search-form{border-radius:12px}.ms-site .ms-search-submit{font-size:0;width:40px;height:40px;padding:0}.ms-site .ms-search-submit:after{content:'search';font-family:'Material Icons';font-size:20px}.ms-site .ms-search-close{width:36px;height:36px}.ms-site .ms-search-empty{padding:50px 16px}}
\n\n/* CATEGORY CARD TEXT FIX + PRODUCT IMAGE CENTERING — 2026-09-24 */
.ms-site .ms-category-card .ms-category-copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    width:calc(100% - 34px);
    min-width:0;
}
.ms-site .ms-category-card .ms-category-name{
    display:block;
    width:100%;
    margin:0!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:750!important;
    line-height:1.2!important;
    letter-spacing:-.01em!important;
    white-space:normal;
    overflow-wrap:anywhere;
}
.ms-site .ms-category-card .ms-category-description{
    display:block;
    width:100%;
    margin:0!important;
    color:rgba(255,255,255,.82)!important;
    font-size:12.5px!important;
    font-weight:400!important;
    line-height:1.45!important;
    white-space:normal;
    overflow-wrap:anywhere;
}
/* Keep the visual subject area centered inside every product card. */
.ms-site .ms-product-image{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
}
.ms-site .ms-product-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:50% 50%!important;
    margin:auto!important;
    transform:none!important;
}
.ms-site .ms-product-card:hover .ms-product-image img{transform:none!important;}
@media(max-width:700px){
    .ms-site .ms-category-card .ms-category-copy{gap:5px;width:calc(100% - 28px)}
    .ms-site .ms-category-card .ms-category-name{font-size:15px!important}
    .ms-site .ms-category-card .ms-category-description{font-size:11.5px!important;line-height:1.35!important}
}


/* PRODUCT IMAGE AUTO CENTER — 2026-09-24
   One rendering rule for square, portrait and landscape source images.
   JS adds a small visual correction when a clear foreground can be detected.
*/
.ms-site .ms-product-image{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    aspect-ratio:1 / 1!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
}
.ms-site .ms-product-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    box-sizing:border-box!important;
    object-fit:contain!important;
    object-position:50% 50%!important;
    margin:0!important;
    padding:clamp(8px,2.4%,14px)!important;
    transform:
        translate(var(--ms-auto-x,0%),var(--ms-auto-y,0%))
        scale(var(--ms-auto-scale,1))!important;
    transform-origin:center center!important;
    transition:none!important;
}
.ms-site .ms-product-card:hover .ms-product-image img{
    transform:
        translate(var(--ms-auto-x,0%),var(--ms-auto-y,0%))
        scale(var(--ms-auto-scale,1))!important;
}
.ms-site .ms-detail-image-main{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
}
.ms-site .ms-detail-image-main img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    object-fit:contain!important;
    object-position:50% 50%!important;
}
@media (max-width:700px){
    .ms-site .ms-product-image img{
        padding:8px!important;
    }
}
@media (prefers-reduced-motion:reduce){
    .ms-site .ms-product-image img{
        transition:none!important;
    }
}


/* PRODUCT VARIANTS — admin */
.ms-variant-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px}
.ms-variant-list{display:grid;gap:10px}
.ms-variant-row{display:grid;grid-template-columns:1.1fr 72px 1fr 1.2fr 1fr 1fr 1.5fr auto auto;gap:8px;align-items:end;padding:14px;border:1px solid var(--ms-border,#d6e0e5);background:var(--ms-surface-soft,#e9eff2);border-radius:12px}
.ms-variant-row label{display:block;font-size:11px;font-weight:700;color:var(--ms-muted,#5c6f7b);margin-bottom:5px}
.ms-variant-row input{width:100%;box-sizing:border-box}
.ms-color-input{height:38px;padding:3px!important}
.ms-variant-actions{display:flex;gap:6px}
.ms-variant-empty{padding:16px;border:1px dashed var(--ms-border,#d6e0e5);border-radius:10px;color:var(--ms-muted,#5c6f7b)}
@media(max-width:1200px){.ms-variant-row{grid-template-columns:repeat(4,minmax(0,1fr))}.ms-variant-actions{grid-column:1/-1}}
@media(max-width:700px){.ms-variant-head{align-items:stretch;flex-direction:column}.ms-variant-row{grid-template-columns:1fr 1fr}.ms-variant-row>div:first-child,.ms-variant-row>div:nth-child(4),.ms-variant-row>div:nth-child(7),.ms-variant-row>.ms-admin-check,.ms-variant-actions{grid-column:1/-1}}

/* Category-level color & size master data */
.ms-category-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.ms-category-option-box{border:1px solid var(--ms-border,#d6e0e5);border-radius:14px;background:var(--ms-surface,#fff);padding:16px}
.ms-category-option-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ms-category-option-head strong{display:block;font-size:16px}
.ms-category-option-head small{display:block;color:var(--ms-muted,#5c6f7b);margin-top:4px;line-height:1.45}
.ms-category-option-list{display:flex;flex-direction:column;gap:8px}
.ms-category-option-row{display:grid;grid-template-columns:minmax(130px,1fr) 48px 70px auto auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--ms-border,#d6e0e5);border-radius:10px;background:var(--ms-surface-soft,#e9eff2)}
.ms-category-option-row.size{grid-template-columns:minmax(130px,1fr) 70px auto auto}
.ms-category-option-row input:not([type="checkbox"]):not([type="color"]){width:100%;min-width:0}
.ms-category-option-row input[type="number"]{max-width:70px}
.ms-category-option-row .ms-admin-check{white-space:nowrap}
.ms-category-option-empty{padding:14px;text-align:center;color:var(--ms-muted,#5c6f7b);border:1px dashed var(--ms-border,#d6e0e5);border-radius:10px}
.ms-color-input{width:42px!important;height:34px!important;padding:3px!important;border:1px solid var(--ms-border,#d6e0e5)!important;border-radius:8px!important;background:#fff}
@media(max-width:900px){.ms-category-options-grid{grid-template-columns:1fr}.ms-category-option-row{grid-template-columns:1fr 48px 70px auto auto}.ms-category-option-row.size{grid-template-columns:1fr 70px auto auto}}
@media(max-width:600px){.ms-category-option-row,.ms-category-option-row.size{grid-template-columns:1fr 48px 1fr}.ms-category-option-row.size{grid-template-columns:1fr 70px 1fr}.ms-category-option-row .ms-admin-check{font-size:12px}.ms-category-option-row .ms-admin-btn{grid-column:1/-1}}
\n\n/* Product variant selector + robust media framing */\n.ms-product-options{margin:22px 0;display:grid;gap:18px;padding:18px;border:1px solid var(--ms-border,#d6e0e5);background:var(--ms-surface-soft,#eef3f5);border-radius:14px}\n.ms-product-option{display:grid;gap:9px}.ms-product-option-title{display:flex;justify-content:space-between;gap:12px;font-size:14px}.ms-product-option-title span{color:var(--ms-muted,#5c6f7b)}\n.ms-option-chips{display:flex;flex-wrap:wrap;gap:8px}.ms-option-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;border:1px solid var(--ms-border,#d6e0e5);background:#fff;color:var(--ms-text,#263944);border-radius:10px;cursor:pointer}.ms-option-chip:hover,.ms-option-chip.active{border-color:var(--ms-accent,#526f83);box-shadow:0 0 0 2px rgba(82,111,131,.10)}.ms-option-chip i{width:16px;height:16px;border-radius:50%;border:1px solid #c8d2d8;display:block}.ms-option-chip.size{min-width:48px;justify-content:center}\n.ms-selected-variant{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ms-muted,#5c6f7b);padding-top:4px}.ms-variant-warning{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fff6e5;border:1px solid #ead5a4;color:#76591d;font-size:13px}.ms-product-old-price{color:var(--ms-muted,#5c6f7b);text-decoration:line-through;font-size:14px}\n.ms-detail-buy button:disabled{opacity:.45;cursor:not-allowed}\n.ms-cart-name small{font-size:11px;color:var(--ms-muted,#5c6f7b)}\n\n/* One canonical product image frame: never stretch, never crop the CSS box. */\n.ms-site .ms-product-image,.ms-site .ms-detail-image-main{position:relative;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:var(--ms-surface-soft,#eef3f5)!important}\n.ms-site .ms-product-image{aspect-ratio:1/1;height:auto!important;min-height:0!important}\n.ms-site .ms-product-image img,.ms-site .ms-detail-image-main img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:50% 50%!important;padding:10px!important;box-sizing:border-box!important;transform:none!important}\n.ms-site .ms-product-card:hover .ms-product-image img{transform:none!important}\n.ms-admin-product-preview,.ms-admin-product-thumb,.ms-admin-gallery-item img{object-fit:contain!important;object-position:50% 50%!important;background:#f3f6f8!important}\n.ms-variant-row select,.ms-variant-row input{width:100%;min-width:0;box-sizing:border-box}\n@media(max-width:1200px){.ms-variant-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ms-variant-actions{grid-column:1/-1}}\n@media(max-width:700px){.ms-variant-row{grid-template-columns:1fr!important}.ms-product-option-title{align-items:flex-start;flex-direction:column}}\n
/* Product category options */
.ms-product-options-box{border:1px solid var(--ms-border,#d6e0e5);border-radius:14px;padding:16px;background:var(--ms-surface-soft,#f7f9fa)}
.ms-product-option-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.ms-product-option-panel{background:var(--ms-surface,#fff);border:1px solid var(--ms-border,#d6e0e5);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ms-option-chips{display:flex;gap:8px;flex-wrap:wrap}
.ms-option-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ms-border,#d6e0e5);border-radius:999px;padding:7px 11px;background:#fff;font-size:13px;font-weight:600}
.ms-option-chip i{width:16px;height:16px;border-radius:50%;border:1px solid #b9c4ca;display:inline-block}
.ms-option-chip.size{min-width:42px;justify-content:center}
.ms-admin-alert.info{background:#eef4f7;border:1px solid #d4e1e7;color:#405763;padding:10px 12px;border-radius:10px}
@media(max-width:700px){.ms-product-option-columns{grid-template-columns:1fr}}

/* One product code, many color/size choices */
.ms-selected-product-code{display:flex;align-items:center;gap:10px;margin:12px 0 6px;padding:10px 12px;border:1px solid var(--ms-border);background:var(--ms-surface-soft);border-radius:10px;font-size:14px;color:var(--ms-muted)}
.ms-selected-product-code b{color:var(--ms-text);letter-spacing:.02em}
.ms-selected-variant{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:8px;padding:10px 12px;border:1px solid var(--ms-border);border-radius:10px;background:var(--ms-surface)}

.ms-policy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.ms-policy-card,.ms-policy-section{background:var(--ms-surface);border:1px solid var(--ms-border);border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(32,48,60,.05)}.ms-policy-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ms-policy-card h2,.ms-policy-section h2{margin:0;color:var(--ms-text)}.ms-policy-card strong{white-space:nowrap;color:var(--ms-accent)}.ms-policy-card p{color:var(--ms-muted);line-height:1.7}.ms-policy-list{display:grid;gap:18px;margin-top:28px}.ms-policy-content{color:var(--ms-muted);line-height:1.8}.ms-policy-content ul{padding-left:22px}.ms-policy-content p{margin:0 0 10px}@media(max-width:900px){.ms-policy-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.ms-policy-grid{grid-template-columns:1fr}}\n

/* Contact / support actions */
.ms-contact-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 34px}
.ms-contact-actions.compact{margin:18px 0 0}
.ms-contact-action{display:flex;align-items:center;gap:12px;min-width:245px;padding:14px 18px;border:1px solid var(--ms-border);border-radius:14px;background:var(--ms-surface);color:var(--ms-text);text-decoration:none;box-shadow:0 8px 24px rgba(28,48,62,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ms-contact-action:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(28,48,62,.11);border-color:var(--ms-accent)}
.ms-contact-action.primary{background:var(--ms-accent);color:#fff;border-color:var(--ms-accent)}
.ms-contact-action .material-icons{font-size:25px}
.ms-contact-action span:last-child{display:flex;flex-direction:column;gap:2px}
.ms-contact-action b{font-size:15px}.ms-contact-action small{opacity:.78;font-size:12px}
.ms-page-support{margin-top:34px;padding:22px;border:1px solid var(--ms-border);border-radius:16px;background:var(--ms-surface-soft)}
.ms-page-support>strong{font-size:18px}

/* Floating hotline / Zalo contact actions */
.ms-floating-contact{position:fixed;right:22px;bottom:24px;z-index:1200;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ms-floating-contact-btn{min-width:154px;height:52px;padding:0 15px 0 12px;border-radius:28px;display:flex;align-items:center;gap:10px;text-decoration:none!important;box-shadow:0 10px 28px rgba(20,38,50,.18);border:1px solid rgba(255,255,255,.7);transition:transform .18s ease,box-shadow .18s ease}
.ms-floating-contact-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,38,50,.24)}
.ms-floating-contact-btn>.material-icons{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#fff}
.ms-floating-hotline{background:#263944;color:#fff}
.ms-floating-hotline>.material-icons{color:#263944}
.ms-floating-zalo{background:#0b8cff;color:#fff}
.ms-floating-zalo>.ms-zalo-mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b8cff;font-size:22px;font-weight:800;font-family:Arial,sans-serif}
.ms-floating-contact-text{display:flex;flex-direction:column;line-height:1.05}
.ms-floating-contact-text b{font-size:13px;letter-spacing:.02em}
.ms-floating-contact-text small{margin-top:4px;font-size:11px;opacity:.86;white-space:nowrap}
@media(max-width:700px){.ms-floating-contact{right:14px;bottom:16px;gap:8px}.ms-floating-contact-btn{min-width:0;width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}.ms-floating-contact-text{display:none}.ms-floating-contact-btn>.material-icons,.ms-floating-contact-btn>.ms-zalo-mark{width:38px;height:38px}}