/* ============================================
   Đừng hỏi tại sao kiểu nó phải thế!
   ============================================ */
   /*vào cái choá gì đi ra ngay
<style>
/* ===== RESET & BASE ===== */
.vps-page * { box-sizing: border-box; }
.vps-page {
    min-height: 100vh;
    background: transparent;
    padding: 24px 0;
    font-family: 'Inter', sans-serif;
}

/* ===== CONTAINER ===== */
.vps-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== HEADER SECTION ===== */
.vps-header {
    margin-bottom: 48px;
    text-align: center;
}
.vps-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #18181b;
    margin-bottom: 8px;
    line-height: 1.2;
}
.dark .vps-header h1 { color: #f4f4f5; }
.vps-header p {
    color: #71717a;
    max-width: 42rem;
    margin: 0 auto 12px;
    font-size: 0.875rem;
}

/* ===== TAB FILTER ===== */
.vps-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 56rem;
    margin: 0 auto;
}
.vps-tab-btn {
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid;
    cursor: pointer;
    background: #fff;
    border-color: #e4e4e7;
    color: #71717a;
}
.dark .vps-tab-btn {
    background: #18181b;
    border-color: #27272a;
    color: #71717a;
}
.vps-tab-btn:hover {
    border-color: #d4d4d8;
}
.vps-tab-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,0.1);
}

/* ===== GRID ===== */
.vps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) { .vps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .vps-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== CARD ===== */
.vps-card {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}
.dark .vps-card {
    background: #18181b;
    border-color: #27272a;
}
.vps-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.vps-card-header { margin-bottom: 24px; }
.vps-card-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.vps-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #18181b;
}
.dark .vps-card-name { color: #f4f4f5; }
.vps-card-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: #f4f4f5;
    color: #71717a;
    border-radius: 4px;
    font-weight: 500;
}
.dark .vps-card-badge { background: #27272a; }

.vps-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.vps-card-price-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #18181b;
}
.dark .vps-card-price-amount { color: #f4f4f5; }
.vps-card-price-period {
    color: #a1a1aa;
    font-size: 0.75rem;
}

/* ===== FEATURES LIST ===== */
.vps-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}
.vps-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #52525b;
}
.dark .vps-feature-item { color: #a1a1aa; }
.vps-feature-icon {
    height: 24px;
    width: 24px;
    border-radius: 8px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dark .vps-feature-icon { background: #27272a; }
.vps-feature-icon svg { color: #71717a; }
.dark .vps-feature-icon svg { color: #a1a1aa; }
.vps-feature-name { font-weight: 500; }

/* ===== BUY BUTTON ===== */
.vps-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.vps-buy-btn:hover { background: #1d4ed8; color: #fff; }

/* ===== FEATURES BANNER ===== */
.vps-features-banner {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) { .vps-features-banner { grid-template-columns: repeat(3, 1fr); } }

.vps-feature-card {
    display: flex;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: #f9f9f9;
    border: 1px solid #f4f4f5;
}
.dark .vps-feature-card { background: rgba(24,24,27,0.3); border-color: #27272a; }
.vps-feature-card-icon {
    height: 40px;
    width: 40px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #18181b;
}
.dark .vps-feature-card-icon { background: #27272a; color: #f4f4f5; }
.vps-feature-card-title {
    font-weight: 700;
    color: #18181b;
    font-size: 0.875rem;
    margin-bottom: 4px;
}
.dark .vps-feature-card-title { color: #f4f4f5; }
.vps-feature-card-desc {
    font-size: 0.75rem;
    color: #71717a;
    font-weight: 500;
    line-height: 1.6;
}

/* ===== TAB PANEL ===== */
.vps-tab-panel { display: none; }
.vps-tab-panel.active { display: block; }
</style>
<style>
/* ===== ORDER PAGE ===== */
.order-page * { box-sizing: border-box; }
.order-page {
    min-height: 100vh;
    background: transparent;
    padding: 24px 0;
    font-family: 'Inter', sans-serif;
}
.order-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Back button */
.order-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #71717a;
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 32px;
    padding: 0;
    transition: color 0.2s;
    text-decoration: none;
}
.order-back-btn:hover { color: #18181b; }
.dark .order-back-btn:hover { color: #fff; }

/* Two-column layout */
.order-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1024px) {
    .order-grid { grid-template-columns: 2fr 1fr; }
}

/* ===== SECTION CARD ===== */
.order-section {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 8px;
}
@media (min-width: 768px) {
    .order-section { padding: 32px; }
}
.dark .order-section { background: #18181b; border-color: #27272a; }

.order-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f4f4f5;
}
.dark .order-section-header { border-bottom-color: #27272a; }
.order-section-icon {
    padding: 8px;
    background: #eff6ff;
    border-radius: 8px;
    color: #2563eb;
}
.dark .order-section-icon { background: rgba(37,99,235,0.2); }
.order-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #18181b;
}
.dark .order-section-title { color: #fff; }
.order-section-subtitle {
    color: #a1a1aa;
    font-size: 0.75rem;
}

/* ===== RESOURCE ADDERS ===== */
.resource-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #3f3f46;
    margin-bottom: 24px;
    display: block;
}
.dark .resource-label { color: #d4d4d8; }

.resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) { .resource-grid { grid-template-columns: repeat(3, 1fr); } }

.resource-card {
    background: rgba(249,249,249,0.5);
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 16px;
}
.dark .resource-card { background: rgba(24,24,27,0.5); border-color: #27272a; }

.resource-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.resource-card-icon {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resource-card-icon.cpu { background: #fff7ed; color: #ea580c; }
.resource-card-icon.ram { background: #faf5ff; color: #9333ea; }
.resource-card-icon.disk { background: #eff6ff; color: #2563eb; }
.dark .resource-card-icon.cpu { background: rgba(234,88,12,0.2); }
.dark .resource-card-icon.ram { background: rgba(147,51,234,0.2); }
.dark .resource-card-icon.disk { background: rgba(37,99,235,0.2); }
.resource-card-label { font-size: 0.75rem; font-weight: 700; }

.resource-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.resource-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e4e4e7;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: #18181b;
    transition: background 0.15s;
    padding: 0;
    line-height: 1;
}
.dark .resource-stepper-btn { border-color: #3f3f46; color: #f4f4f5; }
.resource-stepper-btn:hover { background: #fff; }
.dark .resource-stepper-btn:hover { background: #27272a; }
.resource-stepper-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #18181b;
}
.dark .resource-stepper-value { color: #f4f4f5; }
.resource-price-hint {
    font-size: 10px;
    color: #a1a1aa;
    text-align: center;
}

/* ===== BILLING CYCLE ===== */
.billing-section {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f4f4f5;
}
.dark .billing-section { border-top-color: #27272a; }
.billing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.billing-badge {
    font-size: 10px;
    color: #2563eb;
    font-weight: 700;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
}
.dark .billing-badge { background: rgba(37,99,235,0.2); }

.billing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) { .billing-grid { grid-template-columns: repeat(4, 1fr); } }

.billing-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    background: transparent;
    border-color: #e4e4e7;
    text-align: center;
}
.dark .billing-item { border-color: #27272a; }
.billing-item:hover { border-color: #93c5fd; }
.dark .billing-item:hover { border-color: #1e3a5f; }
.billing-item.active {
    border-color: #2563eb;
    background: rgba(239,246,255,0.5);
    color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}
.dark .billing-item.active { background: rgba(37,99,235,0.1); }
.billing-item-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025em;
}
.billing-item-price {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
}

/* ===== OS SECTION ===== */
.os-section { margin-top: 24px; }
.os-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) { .os-grid { grid-template-columns: repeat(3, 1fr); } }

.os-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e4e4e7;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    transition: all 0.2s;
    background: #fff;
}
.dark .os-item { border-color: #27272a; background: rgba(24,24,27,0.5); }
.os-item:hover { border-color: #93c5fd; }
.dark .os-item:hover { border-color: #1e3a5f; }
.os-item.active {
    border-color: #2563eb;
    background: rgba(239,246,255,0.5);
    color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}
.dark .os-item.active { background: rgba(37,99,235,0.1); }

.os-item-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #f4f4f5;
    transition: transform 0.3s;
}
.dark .os-item-icon-wrap { background: #27272a; }
.os-item:hover .os-item-icon-wrap,
.os-item.active .os-item-icon-wrap { transform: scale(1.1); }
.os-item.active .os-item-icon-wrap { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dark .os-item.active .os-item-icon-wrap { background: #27272a; }
.os-item-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
.os-item-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ===== NOTE INPUT ===== */
.note-section {
    padding-top: 24px;
    margin-top: 40px;
    border-top: 1px solid #f4f4f5;
}
.dark .note-section { border-top-color: #27272a; }
.note-input {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #e4e4e7;
    background: rgba(249,249,249,0.5);
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #18181b;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-top: 16px;
}
.dark .note-input { background: #18181b; border-color: #27272a; color: #f4f4f5; }
.note-input::placeholder { color: #a1a1aa; }
.note-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }

/* ===== ORDER SUMMARY ===== */
.summary-card {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 12px;
    position: sticky;
    top: 96px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
@media (min-width: 768px) { .summary-card { padding: 24px; } }
.dark .summary-card { background: #18181b; border-color: #27272a; }

.summary-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 24px;
}
.dark .summary-title { color: #fff; }

.summary-package {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f4f4f5;
}
.dark .summary-package { border-bottom-color: #27272a; }
.summary-package-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: #18181b;
    margin-bottom: 12px;
}
.dark .summary-package-name { color: #fff; }
.summary-package-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}
.summary-package-label { color: #71717a; }
.summary-package-val { font-weight: 500; color: #18181b; }
.dark .summary-package-val { color: #f4f4f5; }

.summary-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #71717a;
    margin-bottom: 16px;
}
.summary-meta-val { font-weight: 700; color: #18181b; }
.dark .summary-meta-val { color: #f4f4f5; }

/* Coupon */
.coupon-section { padding-top: 16px; margin-top: 16px; border-top: 1px solid #f4f4f5; }
.dark .coupon-section { border-top-color: #27272a; }
.coupon-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-left: 4px;
    margin-bottom: 8px;
    display: block;
}
.coupon-row { display: flex; gap: 8px; }
.coupon-input-wrap { position: relative; flex: 1; }
.coupon-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
}
.coupon-input {
    width: 100%;
    height: 48px;
    padding-left: 48px;
    border-radius: 12px;
    border: 1px solid #f4f4f5;
    background: rgba(249,249,249,0.5);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}
.dark .coupon-input { background: rgba(24,24,27,0.5); border-color: #27272a; color: #f4f4f5; }
.coupon-input:focus { border-color: #2563eb; }
.coupon-apply-btn {
    height: 48px;
    padding: 0 24px;
    background: #18181b;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
}
.dark .coupon-apply-btn { background: #27272a; }
.coupon-apply-btn:hover { background: #27272a; }
.dark .coupon-apply-btn:hover { background: #3f3f46; }

/* Total */
.summary-total-section { padding-top: 12px; border-top: 1px solid #f4f4f5; }
.dark .summary-total-section { border-top-color: #27272a; }
.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.summary-total-label { font-size: 0.875rem; color: #71717a; }
.summary-total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: -0.025em;
}

/* Pay button */
.pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 16px;
}
.pay-btn:hover:not(:disabled) { background: #1d4ed8; }
.pay-btn:active:not(:disabled) { transform: scale(0.98); }
.pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pay-note {
    margin-top: 16px;
    font-size: 10px;
    color: #a1a1aa;
    text-align: center;
    font-weight: 500;
}
</style>
/*product f12 cái cc 
<style>
.product-page-bg{background:#fafafa;min-height:100vh}
/* breadcrumb */
.stc-bc{background:#fff;border-bottom:1px solid #f4f4f5}
.stc-bc .container{padding-top:.75rem;padding-bottom:.75rem}
.stc-bc-inner{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#71717a}
.stc-bc-inner a{color:#71717a;text-decoration:none;transition:color .15s}
.stc-bc-inner a:hover{color:#2563eb}
.stc-bc-inner .current{color:#18181b;font-weight:500;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
/* layout */
.stc-container{padding:2rem 0}
.stc-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:1024px){.stc-grid{grid-template-columns:3fr 2fr}}
.stc-col-left{min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:1rem}
@media(min-width:1024px){.stc-col-right{order:1}.stc-col-left{order:0}}
.stc-sticky{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1rem}
/* card */
.stc-card{background:#fff;border-radius:1rem;border:1px solid #e4e4e7}
.stc-card-p{padding:1.5rem}
.stc-card-psm{padding:1.25rem}
/* gallery */
.stc-gallery{position:relative;aspect-ratio:16/9;background:#fff;border-radius:1rem;border:1px solid #e4e4e7;overflow:hidden;cursor:zoom-in}
.stc-gal-blur{position:absolute;inset:0;background:#f4f4f5}
.stc-gal-blur img{width:100%;height:100%;object-fit:cover;filter:blur(20px);opacity:.4;transform:scale(1.1)}
.stc-gal-main{position:relative;width:100%;height:100%;object-fit:contain;z-index:10;transition:transform .5s}
.stc-gallery:hover .stc-gal-main{transform:scale(1.05)}
.stc-gal-grad{position:absolute;inset-inline:0;bottom:0;height:5rem;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);z-index:10;pointer-events:none}
.stc-gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s;opacity:1}
@media(min-width:1024px){.stc-gal-nav{opacity:0}}
.stc-gallery:hover .stc-gal-nav{opacity:1}
.stc-gal-nav:hover{background:#fff}
.stc-gal-prev{left:.75rem}.stc-gal-next{right:.75rem}
.stc-gal-dots{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.375rem;z-index:20}
.stc-dot{height:.5rem;border-radius:9999px;border:none;cursor:pointer;padding:0;transition:all .2s;background:rgba(255,255,255,.5);width:.5rem;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.stc-dot.active{background:#fff;width:1.5rem}
.stc-gal-fs{position:absolute;top:1rem;right:1rem;z-index:20;background:rgba(0,0,0,.3);border:none;border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .2s;opacity:0;backdrop-filter:blur(4px)}
.stc-gallery:hover .stc-gal-fs{opacity:1}
.stc-gal-fs:hover{background:rgba(0,0,0,.5)}
.stc-gal-heart{position:absolute;top:1rem;left:1rem;z-index:20;background:rgba(255,255,255,.8);border:none;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#18181b;transition:all .2s;backdrop-filter:blur(4px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.stc-gal-heart:hover{background:#fff}
.stc-gal-heart.favourite svg{fill:#ef4444;stroke:#ef4444}
/* thumbs */
.stc-thumbs-wrap{width:100%;max-width:calc(100vw - 2rem);overflow-x:auto;padding-bottom:.5rem}
.stc-thumbs-wrap::-webkit-scrollbar{height:4px}
.stc-thumbs-wrap::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:9999px}
.stc-thumbs-inner{display:flex;gap:.5rem;min-width:max-content}
.stc-thumb{flex-shrink:0;width:5rem;height:4rem;border-radius:.5rem;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:none;transition:all .2s}
.stc-thumb.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.stc-thumb:not(.active):hover{border-color:#d4d4d8}
.stc-thumb img{width:100%;height:100%;object-fit:cover}
/* section title */
.stc-sec-h2{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:.5rem;color:#18181b;margin-bottom:1rem}
/* product description */
.product-description{color:#52525b;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.product-description h2{font-size:1.1rem;font-weight:700;margin:.75rem 0 .25rem;color:#27272a}
.product-description h3{font-size:1rem;font-weight:700;margin:.5rem 0 .25rem;color:#3f3f46}
.product-description ul{padding-left:1.25rem;margin-bottom:.5rem}
.product-description li{margin-bottom:.125rem}
.product-description p{margin-bottom:.75rem}
.product-description p:last-child{margin-bottom:0}
.product-description hr{border:none;border-top:1px solid #e4e4e7;margin:1rem 0}
.product-description strong{color:#27272a}
.product-description img{max-width:100%}
/* features */
.stc-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:600px){.stc-feat-grid{grid-template-columns:1fr}}
.stc-feat-item{display:flex;align-items:center;gap:.5rem;color:#52525b}
.stc-feat-item svg{color:#22c55e;flex-shrink:0;width:1rem;height:1rem}
.stc-feat-item span{font-size:.875rem}
/* purchase card */
.stc-prod-title{font-size:1.5rem;font-weight:700;color:#18181b;line-height:1.3}
.stc-meta-row{display:flex;align-items:center;justify-content:space-between}
.stc-author{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#71717a}
.stc-author svg{width:1rem;height:1rem;flex-shrink:0}
.stc-author-name{font-weight:500;color:#3f3f46}
.stc-stars{display:flex;align-items:center;gap:.25rem}
.stc-star-fill{color:#fbbf24;fill:#fbbf24;width:.875rem;height:.875rem}
.stc-star-empty{color:#d4d4d8;width:.875rem;height:.875rem}
.stc-rating-txt{font-size:.75rem;color:#71717a;margin-left:.25rem}
.stc-tech{display:flex;flex-direction:column;gap:.5rem}
.stc-tech-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#71717a}
.stc-tech-label svg{width:1rem;height:1rem}
.stc-tech-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.stc-tech-tag{padding:.25rem .75rem;background:#f4f4f5;border-radius:9999px;font-size:.75rem;font-weight:500;color:#3f3f46}
.stc-price-label{font-size:.75rem;font-weight:700;color:#71717a;text-transform:uppercase;letter-spacing:.05em;display:block}
.stc-price-val{font-size:1.875rem;font-weight:900;color:#2563eb;line-height:1.1}
.stc-coupon-lbl{font-size:.75rem;font-weight:700;color:#a1a1aa;text-transform:uppercase;letter-spacing:.2em;margin-left:.25rem;display:block;margin-bottom:.5rem}
.stc-coupon-row{display:flex;gap:.5rem}
.stc-coupon-wrap{position:relative;flex:1}
.stc-coupon-wrap svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#a1a1aa;width:1.125rem;height:1.125rem;pointer-events:none}
.stc-coupon-input{width:100%;height:3rem;padding-left:3rem;padding-right:.75rem;border-radius:.75rem;background:#fafafa;border:1px solid #f4f4f5;font-size:.875rem;color:#18181b;outline:none;transition:border-color .2s,box-shadow .2s}
.stc-coupon-input::placeholder{color:#a1a1aa}
.stc-coupon-input:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}
.stc-apply-btn{height:3rem;padding:0 1.5rem;background:#171717;color:#fff;border:none;border-radius:.75rem;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .2s;white-space:nowrap}
.stc-apply-btn:hover{background:#27272a}
.stc-apply-btn:disabled{opacity:.5;cursor:not-allowed}
.stc-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:3rem;font-size:1rem;font-weight:700;color:#fff !important;background:linear-gradient(to right,#2563eb,#1d4ed8);border:none;border-radius:.75rem;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}
.stc-btn-primary:hover{background:linear-gradient(to right,#1d4ed8,#1e40af)}
.stc-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:2.75rem;font-size:.875rem;font-weight:700;color:#18181b !important;background:#fff;border:1px solid #e4e4e7;border-radius:.75rem;cursor:pointer;transition:all .2s;text-decoration:none !important;white-space:nowrap}
.stc-btn-outline:hover{background:#f4f4f5}
.stc-btn-outline svg{width:1rem;height:1rem;flex-shrink:0}
.stc-btns{display:flex;flex-direction:column;gap:.75rem}
/* trust */
.stc-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stc-trust-item{display:flex;align-items:center;gap:.75rem}
.stc-trust-icon{width:2.25rem;height:2.25rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem}
.stc-trust-icon.green{background:#f0fdf4}.stc-trust-icon.green svg{color:#16a34a}
.stc-trust-icon.blue{background:#eff6ff}.stc-trust-icon.blue svg{color:#2563eb}
.stc-trust-icon.purple{background:#faf5ff}.stc-trust-icon.purple svg{color:#9333ea}
.stc-trust-icon.amber{background:#fffbeb}.stc-trust-icon.amber svg{color:#d97706}
.stc-trust-icon svg{width:1.125rem;height:1.125rem}
.stc-trust-title{font-size:.75rem;font-weight:700;color:#18181b;margin:0}
.stc-trust-sub{font-size:.625rem;color:#71717a;margin:0}
/* scroll top */
#stc-top-btn{position:fixed;z-index:50;bottom:1.25rem;right:1rem;width:2.25rem;height:2.25rem;border-radius:50%;background:#2563eb;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(1rem);transition:all .3s ease;pointer-events:none}
@media(min-width:1024px){#stc-top-btn{bottom:1.5rem;right:1.5rem;width:2.5rem;height:2.5rem}}
#stc-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:all}
#stc-top-btn:hover{background:#1d4ed8;transform:scale(1.1)}
</style>
<!-- FOOTER copy cc ra ngoài -->
<style>
    .stc-footer {
        border-top: 1px solid #e5e7eb;
        background: #fff;
        padding-top: 48px;
        padding-bottom: 96px;
        margin-top: auto;
    }
    @media (min-width: 1024px) {
        .stc-footer { padding-bottom: 32px; }
    }
    .stc-footer .container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
    .stc-footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin-bottom: 48px;
    }
    @media (min-width: 768px) {
        .stc-footer-grid { grid-template-columns: repeat(4, 1fr); }
    }
    .stc-footer-col-wide { grid-column: span 2; }
    @media (min-width: 768px) { .stc-footer-col-wide { grid-column: span 1; } }

    .stc-footer-logo { display:flex; align-items:center; gap:8px; text-decoration:none; margin-bottom:16px; }
    .stc-footer-logo img { height:32px; width:auto; object-fit:contain; }

    .stc-footer-desc {
        font-size: 14px;
        color: #71717a;
        line-height: 1.6;
        margin-bottom: 8px;
    }
    .stc-footer h4 {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #18181b;
        margin-bottom: 24px;
    }
    .stc-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
    .stc-footer ul li a {
        font-size: 14px;
        color: #71717a;
        text-decoration: none;
        transition: color 0.15s;
    }
    .stc-footer ul li a:hover { color: #18181b; }

    .stc-footer-bottom {
        padding-top: 32px;
        border-top: 1px solid #f4f4f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    @media (min-width: 768px) {
        .stc-footer-bottom { flex-direction: row; justify-content: space-between; }
    }
    .stc-footer-bottom p { font-size: 12px; color: #a1a1aa; margin: 0; }
    .stc-footer-bottom-links { display: flex; align-items: center; gap: 24px; }
    .stc-footer-bottom-links a { font-size: 12px; color: #a1a1aa; text-decoration: none; transition: color 0.15s; }
    .stc-footer-bottom-links a:hover { color: #18181b; }

    /* Back to top */
    .stc-back-to-top {
        position: fixed;
        z-index: 50;
        bottom: 88px;
        right: 16px;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        box-shadow: 0 2px 8px rgba(37,99,235,0.25);
    }
    @media (min-width: 1024px) {
        .stc-back-to-top { bottom: 24px; right: 24px; width: 40px; height: 40px; }
    }
    .stc-back-to-top:hover { background: #1d4ed8; transform: scale(1.1); }
    .stc-back-to-top:active { transform: scale(0.95); }

    /* Contact float button */
    .stc-contact-fab {
        position: fixed;
        bottom: 128px;
        right: 16px;
        z-index: 50;
    }
    @media (min-width: 1024px) {
        .stc-contact-fab { bottom: 72px; right: 24px; }
    }
    .stc-contact-fab-main {
        width: 48px; height: 48px; border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff; border: none; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(59,130,246,0.35);
        transition: transform 0.3s;
    }
    .stc-contact-fab-main:hover { transform: scale(1.1); }

    .stc-contact-fab-menu {
        position: absolute;
        bottom: 60px; right: 0;
        display: flex; flex-direction: column; gap: 8px;
        opacity: 0; pointer-events: none;
        transform: translateY(16px);
        transition: opacity 0.25s, transform 0.25s;
    }
    .stc-contact-fab-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); }

    .stc-fab-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 16px; border-radius: 99px;
        color: #fff; font-size: 14px; font-weight: 500;
        border: none; cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        text-decoration: none; white-space: nowrap;
        transition: transform 0.2s, opacity 0.2s;
    }
    .stc-fab-item:hover { transform: scale(1.05); color: #fff; }
    .stc-fab-zalo { background: #0068ff; }
    .stc-fab-messenger { background: #0084ff; }
    .stc-fab-phone { background: #22c55e; }
    .stc-fab-telegram { background: #0398e2; }
</style>
/*index chính copy cc ra ngoài
<style>
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: #fafafa;
    color: #0a0a0a;
    line-height: 1.5;
}

.stc-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== HERO SECTION ===== */
.stc-hero-wrap {
    padding: 32px 0 40px;
    background: #fafafa;
}

.stc-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 40px;
}

@media (min-width: 1024px) {
    .stc-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.stc-hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stc-hero-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 900;
    color: #18181b;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.stc-hero-title .stc-gradient-text {
    background: linear-gradient(to right, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 4px;
    display: inline-block;
}

.stc-hero-desc {
    font-size: 14px;
    color: #71717a;
    max-width: 512px;
    line-height: 1.65;
    min-height: 48px;
}

@media (min-width: 640px) {
    .stc-hero-desc { font-size: 15px; }
}

/* ===== BUTTONS ===== */
.stc-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.stc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 44px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}
.stc-btn-primary:hover { background: #1d4ed8; color: #fff; text-decoration: none; }
.stc-btn-primary:active { transform: scale(0.95); }

.stc-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 44px;
    background: #fff;
    color: #18181b;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}
.stc-btn-outline:hover { background: #f4f4f5; color: #18181b; text-decoration: none; }
.stc-btn-outline:active { transform: scale(0.95); }

/* ===== FEATURE CARDS ===== */
.stc-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 16px;
}

@media (min-width: 640px) {
    .stc-feature-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.stc-feature-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f4f4f5;
}

.stc-feature-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stc-feature-icon {
    width: 14px;
    height: 14px;
    color: #2563eb;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .stc-feature-icon { width: 16px; height: 16px; }
}

.stc-feature-title {
    font-size: 11px;
    font-weight: 700;
    color: #18181b;
}

@media (min-width: 640px) {
    .stc-feature-title { font-size: 13px; }
}

.stc-feature-desc {
    font-size: 9px;
    color: #71717a;
    font-weight: 500;
    padding-left: 20px;
}

@media (min-width: 640px) {
    .stc-feature-desc { font-size: 10px; padding-left: 24px; }
}

/* ===== HERO IMAGE ===== */
.stc-hero-image-wrap {
    display: none;
    position: relative;
}

@media (min-width: 1024px) {
    .stc-hero-image-wrap { display: block; }
}

.stc-hero-image-glow {
    position: absolute;
    inset: -16px;
    background: rgba(59, 130, 246, 0.05);
    filter: blur(48px);
    border-radius: 50%;
}

.stc-hero-image-inner {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #f4f4f5;
    padding: 8px;
    border-radius: 32px;
    overflow: hidden;
}

.stc-hero-image-inner img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
    transition: transform 0.7s ease;
}

.stc-hero-image-inner:hover img {
    transform: scale(1.02);
}

/* ===== ECOSYSTEM SECTION ===== */
.stc-section {
    margin-bottom: 48px;
}

.stc-section-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.stc-section-title {
    font-size: 22px;
    font-weight: 800;
    color: #18181b;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stc-section-subtitle {
    font-size: 14px;
    color: #71717a;
    margin-top: 4px;
}

/* ===== ECO CARDS ===== */
.stc-eco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .stc-eco-grid { grid-template-columns: repeat(4, 1fr); }
}

.stc-eco-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #f4f4f5;
    padding: 8px;
    border-radius: 16px;
    text-decoration: none;
    transition: box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
}

@media (min-width: 640px) {
    .stc-eco-card { gap: 16px; padding: 16px; }
}

.stc-eco-card:hover {
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.05);
    text-decoration: none;
}

.stc-eco-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}

@media (min-width: 640px) {
    .stc-eco-icon-box { width: 48px; height: 48px; }
}

.stc-eco-card:hover .stc-eco-icon-box {
    transform: scale(1.1);
}

.stc-eco-icon-box.blue   { background: #eff6ff; color: #2563eb; }
.stc-eco-icon-box.green  { background: #ecfdf5; color: #059669; }
.stc-eco-icon-box.indigo { background: #eef2ff; color: #4f46e5; }
.stc-eco-icon-box.amber  { background: #fffbeb; color: #d97706; }

.stc-eco-icon-box svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 640px) {
    .stc-eco-icon-box svg { width: 24px; height: 24px; }
}

.stc-eco-info { flex: 1; min-width: 0; }

.stc-eco-name {
    font-weight: 700;
    font-size: 11px;
    color: #18181b;
    margin-bottom: 0;
    display: block;
}

@media (min-width: 640px) {
    .stc-eco-name { font-size: 14px; margin-bottom: 2px; }
}

.stc-eco-desc {
    font-size: 9px;
    color: #71717a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .stc-eco-desc { font-size: 11px; }
}

.stc-eco-chevron {
    width: 12px;
    height: 12px;
    color: #d4d4d8;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

@media (min-width: 640px) {
    .stc-eco-chevron { width: 16px; height: 16px; }
}

.stc-eco-card:hover .stc-eco-chevron {
    color: #2563eb;
    transform: translateX(4px);
}

/* ===== PRODUCTS SECTION ===== */
.stc-products-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .stc-products-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.stc-products-title-block h2 {
    font-size: 22px;
    font-weight: 800;
    color: #18181b;
    letter-spacing: -0.015em;
}

@media (min-width: 640px) {
    .stc-products-title-block h2 { font-size: 28px; }
}

.stc-products-title-block p {
    font-size: 14px;
    color: #71717a;
    margin-top: 4px;
}

@media (min-width: 640px) {
    .stc-products-title-block p { font-size: 16px; }
}

/* ===== CONTROLS ===== */
.stc-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stc-view-switcher {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #f4f4f5;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-right: 8px;
}

.stc-view-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #71717a;
    transition: background 0.2s, color 0.2s;
}

.stc-view-btn.active,
.stc-view-btn:hover {
    background: #f4f4f5;
    color: #18181b;
}

.stc-sort-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #f4f4f5;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow-x: auto;
    scrollbar-width: none;
    max-width: calc(100vw - 8rem);
}

@media (min-width: 640px) {
    .stc-sort-group { max-width: none; }
}

.stc-sort-group::-webkit-scrollbar { display: none; }

.stc-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: #71717a;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.stc-sort-btn.active,
.stc-sort-btn:hover {
    background: #f4f4f5;
    color: #18181b;
}

/* ===== CATEGORY PILLS ===== */
.stc-category-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
    align-items: center;
    margin-bottom: 0;
}

.stc-category-pills::-webkit-scrollbar { display: none; }

.stc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.stc-pill.active,
.stc-pill-active {
    background: #2563eb;
    color: #fff;
    border: none;
}

.stc-pill:not(.active):not(.stc-pill-active) {
    background: #fff;
    color: #18181b;
    border: 1px solid #e4e4e7;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.stc-pill:not(.active):not(.stc-pill-active):hover {
    background: #f4f4f5;
    color: #18181b;
    text-decoration: none;
}

/* ===== PRODUCT GRID ===== */
.stc-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 1024px) {
    .stc-product-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ===== PRODUCT CARD ===== */
.stc-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stc-product-card:hover { text-decoration: none; color: inherit; }

.stc-product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #f4f4f5;
    padding: 8px;
    border-radius: 16px;
    transition: transform 0.3s;
}

@media (min-width: 640px) {
    .stc-product-inner { padding: 12px; }
}

.stc-product-card:hover .stc-product-inner {
    transform: translateY(-4px);
}

.stc-product-img-wrap {
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f4f5;
    position: relative;
    transition: all 0.7s ease;
}

.stc-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.7s ease;
}

.stc-product-card:hover .stc-product-img-wrap img {
    transform: scale(1.1);
}

.stc-price-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 4px;
}

.stc-price-badge span {
    font-weight: 800;
    font-size: 10px;
    color: #fff;
}

@media (min-width: 640px) {
    .stc-price-badge span { font-size: 12px; }
}

.stc-product-body {
    padding: 4px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stc-product-tag {
    display: inline-flex;
    align-items: center;
}

.stc-tag-badge {
    background: #eff6ff;
    color: #2563eb;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stc-product-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.35;
    color: #18181b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

@media (min-width: 640px) {
    .stc-product-title { font-size: 16px; }
}

.stc-product-card:hover .stc-product-title {
    color: #2563eb;
}

.stc-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.stc-product-author {
    font-size: 9px;
    color: #71717a;
    font-weight: 500;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .stc-product-author { font-size: 10px; }
}

.stc-product-author span {
    color: #71717a;
}

.stc-product-price {
    font-weight: 900;
    font-size: 11px;
    color: #2563eb;
}

@media (min-width: 640px) {
    .stc-product-price { font-size: 14px; }
}

/* ===== LIST VIEW ===== */
.stc-product-grid.list-mode {
    grid-template-columns: 1fr;
    gap: 12px;
}

.stc-product-grid.list-mode .stc-product-inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.stc-product-grid.list-mode .stc-product-img-wrap {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 4/3;
}

.stc-product-grid.list-mode .stc-product-body {
    flex: 1;
    margin-top: 0;
}

/* ===== MOBILE SCROLL ARROW ===== */
.stc-scroll-arrow {
    display: none;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: 50%;
    color: #71717a;
    border: 1px solid #f4f4f5;
    cursor: pointer;
    font-size: 10px;
}

@media (max-width: 640px) {
    .stc-scroll-arrow { display: flex; }
}

/* ===== UTILITIES ===== */
.stc-relative { position: relative; }
.stc-mt-12 { margin-top: 48px; }
.stc-space-y-6 > * + * { margin-top: 24px; }
.stc-space-y-12 > * + * { margin-top: 48px; }
.stc-mb-4 { margin-bottom: 16px; }
.stc-pt-8 { padding-top: 32px; }
.stc-py-8 { padding: 32px 0; }
/* ===== MOBILE OVERFLOW FIX ===== */
.stc-product-card,
.stc-product-grid > * { min-width: 0; }
.stc-product-inner { overflow: hidden; }
.stc-controls { flex-wrap: wrap; }
.stc-sort-group { max-width: none; flex: 1; min-width: 0; }
.stc-relative { overflow: hidden; }
@media (max-width: 640px) {
    .stc-btn-group {
        flex-wrap: nowrap !important;
        gap: 8px;
    }
    .stc-btn-primary,
    .stc-btn-outline {
        padding: 0 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}
/* ===== FIX BUTTON GROUP PC ===== */
.stc-btn-group {
    flex-wrap: nowrap !important;
    align-items: center;
}

.stc-btn-primary,
.stc-btn-outline {
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
}
</style>
/* services vô đáy cc */
<style>
/* services vô đáy cc */
:root {
    --background: #fff;
    --foreground: #0a0a0a;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --radius: .625rem;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --zinc-50:  #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
}

/* ===== PAGE WRAPPER ===== */
.stc2-page {
    padding: 32px 0;
    background: var(--zinc-50);
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.stc2-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== SPACE Y ===== */
.stc2-space-y > * + * { margin-top: 48px; }
.stc2-space-y-6 > * + * { margin-top: 24px; }

/* ===== PAGE HEADER ===== */
.stc2-header-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 768px) {
    .stc2-header-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.stc2-header-row h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--zinc-900);
    line-height: 1.2;
}

.stc2-header-row p {
    color: var(--muted-foreground);
    max-width: 32rem;
    margin-top: 8px;
    font-size: 14px;
}

/* ===== SEARCH INPUT ===== */
.stc2-search-wrap {
    position: relative;
    width: 100%;
}
@media (min-width: 768px) {
    .stc2-search-wrap { max-width: 28rem; }
}

.stc2-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--zinc-400);
    pointer-events: none;
}

.stc2-search-input {
    width: 100%;
    height: 48px;
    padding-left: 40px;
    padding-right: 16px;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    font-size: 14px;
    color: var(--zinc-900);
    outline: none;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.stc2-search-input:focus {
    border-color: rgba(59,130,246,.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.stc2-search-input::placeholder { color: var(--muted-foreground); }

/* ===== CONTROLS ROW ===== */
.stc2-controls-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 640px) {
    .stc2-controls-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ===== CATEGORY PILLS ===== */
.stc2-pills-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.stc2-pills-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
}
.stc2-pills-scroll::-webkit-scrollbar { display: none; }

.stc2-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 36px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-decoration: none;
    transition: all .2s;
    flex-shrink: 0;
}

.stc2-pill.active {
    background: var(--blue-600);
    color: #fff;
    box-shadow: 0 10px 25px rgba(59,130,246,.2);
}

.stc2-pill:not(.active) {
    background: #fff;
    color: var(--zinc-900);
    border: 1px solid var(--zinc-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.stc2-pill:not(.active):hover {
    background: var(--zinc-100);
    text-decoration: none;
    color: var(--zinc-900);
}

/* mobile scroll arrow on pills */
.stc2-pill-arrow {
    display: none;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border-radius: 50%;
    color: var(--zinc-500);
    border: 1px solid var(--zinc-100);
    cursor: pointer;
    font-size: 10px;
    animation: fadeIn .3s ease;
}
@media (max-width: 640px) { .stc2-pill-arrow { display: flex; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== RIGHT CONTROLS ===== */
.stc2-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* view switcher */
.stc2-view-switcher {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.stc2-view-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--zinc-500);
    transition: background .2s, color .2s;
}
.stc2-view-btn.active,
.stc2-view-btn:hover {
    background: var(--zinc-100);
    color: var(--zinc-900);
}
.stc2-view-btn svg { width: 16px; height: 16px; }

/* sort group */
.stc2-sort-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    overflow-x: auto;
    scrollbar-width: none;
}
.stc2-sort-group::-webkit-scrollbar { display: none; }

.stc2-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
    font-family: inherit;
}
.stc2-sort-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.stc2-sort-btn.active,
.stc2-sort-btn:hover {
    background: var(--zinc-100);
    color: var(--zinc-900);
}

/* ===== SR-ONLY ===== */
.stc2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ===== PRODUCT GRID ===== */
.stc2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .stc2-grid { gap: 24px; }
}
@media (min-width: 1024px) {
    .stc2-grid { grid-template-columns: repeat(4, 1fr); }
}

/* list mode */
.stc2-grid.list-mode {
    grid-template-columns: 1fr;
    gap: 12px;
}
.stc2-grid.list-mode .stc2-card-inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.stc2-grid.list-mode .stc2-img-wrap {
    width: 140px;
    min-width: 140px;
}
.stc2-grid.list-mode .stc2-card-body {
    flex: 1;
    margin-top: 0;
}

/* ===== PRODUCT CARD ===== */
.stc2-card {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.stc2-card:hover { text-decoration: none; color: inherit; }

.stc2-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--zinc-100);
    padding: 12px;
    border-radius: 16px;
    transition: transform .3s ease;
    overflow: hidden;
}
.stc2-card:hover .stc2-card-inner {
    transform: translateY(-4px);
}

/* image */
.stc2-img-wrap {
    aspect-ratio: 4/3;
    border-radius: 16px;
    overflow: hidden;
    background: var(--zinc-100);
    position: relative;
    transition: all .7s ease;
}
.stc2-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .7s ease;
    display: block;
}
.stc2-card:hover .stc2-img-wrap img {
    transform: scale(1.1);
}

/* price badge on image */
.stc2-price-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(37,99,235,.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    gap: 6px;
}
.stc2-price-badge span {
    font-weight: 800;
    font-size: 12px;
    color: #fff;
}
@media (min-width: 640px) {
    .stc2-price-badge span { font-size: 14px; }
}

/* card body */
.stc2-card-body {
    padding: 4px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stc2-tag-badge {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: var(--blue-600);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
    width: fit-content;
}

.stc2-card-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--zinc-900);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (min-width: 640px) {
    .stc2-card-title { font-size: 16px; }
}
.stc2-card:hover .stc2-card-title { color: var(--blue-600); }

.stc2-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
}

.stc2-card-author {
    font-size: 10px;
    color: var(--muted-foreground);
    font-weight: 500;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 640px) { .stc2-card-author { font-size: 12px; } }
.stc2-card-author span { color: var(--zinc-500); }

.stc2-card-price {
    font-weight: 900;
    font-size: 11px;
    color: var(--blue-600);
    flex-shrink: 0;
}
@media (min-width: 640px) { .stc2-card-price { font-size: 14px; } }

/* ===== EMPTY STATE ===== */
.stc2-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    color: var(--muted-foreground);
}
.stc2-empty svg { opacity: .5; margin-bottom: 16px; }
.stc2-empty p { font-size: 14px; }

/* ===== PAGINATION ===== */
.stc2-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
</style>
/* categories */
<style>
/* ===== BASE ===== */
.cat-page {
    min-height: 100vh;
    background: #fafafa;
    padding: 48px 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.cat-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== BREADCRUMB ===== */
.cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 16px;
}

.cat-breadcrumb a {
    color: #a1a1aa;
    text-decoration: none;
    transition: color .2s;
}
.cat-breadcrumb a:hover { color: #2563eb; }

.cat-breadcrumb svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cat-breadcrumb span {
    color: #2563eb;
    font-weight: 700;
}

/* ===== HEADER ROW ===== */
.cat-header-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .cat-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.cat-header-row h1 {
    font-size: 30px;
    font-weight: 700;
    color: #18181b;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
@media (min-width: 768px) {
    .cat-header-row h1 { font-size: 36px; }
}

.cat-header-row p {
    color: #71717a;
    margin-top: 8px;
    font-weight: 500;
    font-size: 15px;
}

/* ===== SEARCH ===== */
.cat-search-wrap {
    position: relative;
    width: 100%;
}
@media (min-width: 768px) {
    .cat-search-wrap { width: 320px; }
}

.cat-search-wrap svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #a1a1aa;
    pointer-events: none;
    transition: color .2s;
}

.cat-search-wrap:focus-within svg {
    color: #2563eb;
}

.cat-search-input {
    width: 100%;
    height: 48px;
    padding-left: 48px;
    padding-right: 16px;
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    font-size: 14px;
    color: #18181b;
    outline: none;
    font-family: inherit;
    transition: box-shadow .2s;
}
.cat-search-input:focus {
    box-shadow: 0 0 0 2px rgba(59,130,246,.3), 0 1px 3px rgba(0,0,0,.08);
}
.cat-search-input::placeholder { color: #a1a1aa; }

/* ===== GRID ===== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1280px) {
    .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}

/* ===== CARD ===== */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #fff;
    padding: 24px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .3s, transform .3s;
    cursor: pointer;
}

.cat-card:hover {
    box-shadow: 0 25px 50px rgba(59,130,246,.05);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* icon box */
.cat-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: transform .3s;
    flex-shrink: 0;
}
.cat-card:hover .cat-icon-box {
    transform: scale(1.1);
}
.cat-icon-box svg {
    width: 32px;
    height: 32px;
}

/* name */
.cat-card h3 {
    font-weight: 700;
    color: #18181b;
    margin-bottom: 4px;
    font-size: 14px;
    transition: color .2s;
    line-height: 1.3;
}
@media (min-width: 640px) {
    .cat-card h3 { font-size: 15px; }
}
.cat-card:hover h3 { color: #2563eb; }

/* desc */
.cat-card-desc {
    font-size: 12px;
    color: #a1a1aa;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* count badge */
.cat-count-badge {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #fafafa;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    color: #71717a;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.cat-count-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.cat-card:hover .cat-count-badge {
    background: #2563eb;
    color: #fff;
}

/* ===== HIDDEN (search filter) ===== */
.cat-card.hidden-card { display: none; }

/* ===== EMPTY ===== */
.cat-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 0;
    color: #a1a1aa;
    font-size: 14px;
}
</style>
/* categories/view copy cc */
<style>
/* ===== BASE ===== */
.cv-page {
    min-height: 100vh;
    background: #fafafa;
    padding: 32px 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: #18181b;
}
.cv-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== GRID LAYOUT ===== */
.cv-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 1024px) {
    .cv-layout { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .cv-col-main { grid-column: span 8; }
    .cv-col-side { grid-column: span 4; }
}

/* ===== CARD PANEL ===== */
.cv-panel {
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,1);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    position: relative;
}

/* ===== HEADER PANEL ===== */
.cv-hero h1 {
    font-size: 24px;
    font-weight: 700;
    color: #18181b;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.3;
}
@media (min-width: 768px) {
    .cv-hero h1 { font-size: 28px; }
}
.cv-hero p {
    color: #71717a;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    max-width: 44rem;
}

/* ===== FILTER BAR ===== */
.cv-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,1);
    padding: 8px;
    border-radius: 16px;
}
@media (min-width: 768px) {
    .cv-filter-bar { flex-direction: row; align-items: center; }
}

.cv-sort-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(244,244,245,.5);
    padding: 4px;
    border-radius: 12px;
    flex-shrink: 0;
}

.cv-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: #71717a;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.cv-sort-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.cv-sort-btn.active {
    background: #fff;
    color: #18181b;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cv-sort-btn.active svg { color: #2563eb; }
.cv-sort-btn:hover:not(.active) { color: #52525b; }

/* search in filter bar */
.cv-search-wrap {
    position: relative;
    flex: 1;
    width: 100%;
}
.cv-search-wrap svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #a1a1aa;
    pointer-events: none;
    transition: color .2s;
}
.cv-search-wrap:focus-within svg { color: #2563eb; }
.cv-search-input {
    width: 100%;
    height: 44px;
    padding-left: 44px;
    padding-right: 16px;
    background: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    color: #18181b;
    outline: none;
    font-family: inherit;
    transition: box-shadow .2s;
}
.cv-search-input:focus {
    box-shadow: 0 0 0 2px rgba(59,130,246,.3);
}
.cv-search-input::placeholder { color: #a1a1aa; }

/* ===== PRODUCT LIST ===== */
.cv-product-list { display: flex; flex-direction: column; gap: 0; }

.cv-product-item {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .2s;
}
.cv-product-item:hover { transform: translateY(-4px); text-decoration: none; color: inherit; }

.cv-product-inner {
    background: #fff;
    border: 1px solid #f4f4f5;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow .3s;
    margin-bottom: 16px;
}
.cv-product-item:hover .cv-product-inner {
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
}

/* thumbnail */
.cv-product-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #f4f4f5;
    overflow: hidden;
    border: 1px solid #f4f4f5;
}
@media (min-width: 768px) {
    .cv-product-thumb { width: 80px; height: 80px; }
}
.cv-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
    display: block;
}
.cv-product-item:hover .cv-product-thumb img { transform: scale(1.1); }

/* info */
.cv-product-info {
    flex: 1;
    min-width: 0;
}

.cv-product-title {
    font-weight: 700;
    color: #18181b;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
    margin-bottom: 4px;
}
.cv-product-item:hover .cv-product-title { color: #2563eb; }

.cv-product-desc {
    color: #71717a;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    font-weight: 500;
}

.cv-product-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #fafafa;
    border: 1px solid #f4f4f5;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    cursor: default;
}
.cv-tag svg { width: 10px; height: 10px; }

/* vote box */
.cv-vote-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 8px;
}
@media (min-width: 1024px) {
    .cv-vote-box { padding: 0 16px; }
}

.cv-vote-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #f4f4f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a1a1aa;
    cursor: pointer;
    transition: all .2s;
    font-size: 10px;
    font-weight: 700;
    gap: 2px;
}
@media (min-width: 1024px) {
    .cv-vote-btn { width: 48px; height: 48px; }
}
.cv-vote-btn:hover {
    color: #2563eb;
    border-color: rgba(59,130,246,.3);
}
.cv-vote-btn svg { width: 20px; height: 20px; transition: transform .2s; }
.cv-vote-btn:hover svg { transform: translateY(-2px); }

.cv-comment-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #d4d4d8;
}
.cv-comment-count svg { width: 10px; height: 10px; }

/* ===== EMPTY STATE ===== */
.cv-empty {
    text-align: center;
    padding: 64px 0;
    color: #a1a1aa;
    font-size: 14px;
}
.cv-empty svg { margin-bottom: 16px; opacity: .4; }

/* ===== SIDEBAR ===== */
.cv-sidebar-panel {
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,1);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    position: relative;
}

.cv-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #18181b;
    margin-bottom: 24px;
}

/* category list in sidebar */
.cv-cat-list { display: flex; flex-direction: column; gap: 0; }

.cv-cat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .2s;
    text-decoration: none;
    color: inherit;
    padding: 8px 0;
}
.cv-cat-item:hover { transform: translateX(4px); text-decoration: none; color: inherit; }

.cv-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
    background: #fff;
    color: #a1a1aa;
}
.cv-cat-icon svg { width: 18px; height: 18px; }
.cv-cat-item:hover .cv-cat-icon { background: #eff6ff; color: #2563eb; }
.cv-cat-item.active-cat .cv-cat-icon { background: #2563eb; color: #fff; }
.cv-cat-item.active-cat { pointer-events: none; }

.cv-cat-info { flex: 1; min-width: 0; }
.cv-cat-info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cv-cat-name {
    font-size: 12px;
    font-weight: 700;
    color: #3f3f46;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-cat-item.active-cat .cv-cat-name { color: #2563eb; }
.cv-cat-count {
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    flex-shrink: 0;
}
.cv-cat-sub {
    font-size: 10px;
    color: #a1a1aa;
    margin-top: 2px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-see-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #a1a1aa;
    text-decoration: none;
    margin-top: 32px;
    transition: color .2s;
}
.cv-see-all:hover { color: #2563eb; text-decoration: none; }
.cv-see-all svg { width: 12px; height: 12px; transition: transform .2s; }
.cv-see-all:hover svg { transform: translateX(4px); }

/* ===== TAGS SIDEBAR ===== */
.cv-tags-list { display: flex; flex-direction: column; }

.cv-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background .2s;
}
.cv-tag-row:hover { background: #fff; text-decoration: none; color: inherit; }

.cv-tag-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #71717a;
    font-weight: 700;
    font-size: 12px;
    transition: color .2s;
}
.cv-tag-row:hover .cv-tag-row-left { color: #2563eb; }

.cv-tag-hash {
    font-size: 18px;
    color: #d4d4d8;
    line-height: 1;
}

.cv-tag-count {
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    background: #f4f4f5;
    padding: 2px 8px;
    border-radius: 9999px;
}

/* ===== SPACE ===== */
.cv-space > * + * { margin-top: 32px; }
.cv-main-space > * + * { margin-top: 24px; }
</style>
/* domain cpy gì ra ngoài  */
<style>
/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --background: #fff;
    --foreground: #0a0a0a;
    --card: #fff;
    --card-foreground: #0a0a0a;
    --primary: #171717;
    --primary-foreground: #fafafa;
    --secondary: #f5f5f5;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --accent: #f5f5f5;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: #a1a1a1;
    --radius: 0.625rem;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
    --emerald-600: #059669;
}

.dark {
    --background: #09090b;
    --foreground: #fafafa;
    --card: #09090b;
    --card-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #171717;
    --secondary: #27272a;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --accent: #27272a;
    --border: #27272a;
    --input: #27272a;
}

/* ===== PAGE LAYOUT ===== */
.domain-page {
    min-height: 100vh;
    background: transparent;
    padding: 2.5rem 0;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.domain-container {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== PAGE HEADER ===== */
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zinc-900);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.dark .page-title { color: var(--zinc-100); }

.page-subtitle {
    color: var(--zinc-500);
    font-size: 0.95rem;
}

/* ===== MAIN CARD ===== */
.domain-card {
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.dark .domain-card {
    background: var(--zinc-900);
    border-color: var(--zinc-800);
}

.domain-card-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== DOMAIN INPUT SECTION ===== */
.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--zinc-700);
}
.dark .field-label { color: var(--zinc-300); }

.field-label-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--zinc-700);
}
.dark .field-label-flex { color: var(--zinc-300); }

.domain-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .domain-input-row {
        flex-direction: row;
        align-items: stretch;
    }
}

/* Domain text input */
.domain-text-wrap {
    position: relative;
    flex: 1;
}

.domain-text-wrap svg.input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zinc-400);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.domain-text-input {
    width: 100%;
    height: 3rem;
    padding-left: 2.5rem;
    padding-right: 1rem;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dark .domain-text-input {
    background: var(--zinc-900);
    border-color: var(--zinc-800);
    color: var(--zinc-100);
}

.domain-text-input:focus {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.domain-text-input::placeholder { color: var(--zinc-400); }

/* Extension selector */
.ext-wrap {
    position: relative;
    flex-shrink: 0;
}

.ext-btn {
    width: 100%;
    min-width: 7rem;
    height: 3rem;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    outline: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.dark .ext-btn {
    background: var(--zinc-900);
    border-color: var(--zinc-800);
    color: var(--zinc-100);
}

.ext-btn:hover {
    background: var(--zinc-50);
}
.dark .ext-btn:hover { background: var(--zinc-800); }

.ext-btn svg {
    flex-shrink: 0;
    opacity: 0.5;
    width: 14px;
    height: 14px;
}

/* Extension dropdown */
.ext-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--zinc-200);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    overflow: hidden;
    display: none;
    max-height: 220px;
    overflow-y: auto;
}
.dark .ext-dropdown {
    background: var(--zinc-900);
    border-color: var(--zinc-800);
}

.ext-dropdown.open { display: block; }

.ext-option {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--foreground);
    transition: background 0.1s;
}
.dark .ext-option { color: var(--zinc-100); }

.ext-option:hover, .ext-option.active {
    background: var(--zinc-100);
}
.dark .ext-option:hover, .dark .ext-option.active { background: var(--zinc-800); }

/* Search button */
.search-btn {
    height: 3rem;
    padding: 0 2rem;
    background: var(--blue-600);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
}

.search-btn:hover { background: var(--blue-700); }
.search-btn:active { transform: scale(0.97); }
.search-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ===== NAMESERVER SECTION ===== */
.ns-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ns-checkbox-row input[type="checkbox"] {
    border-radius: 0.25rem;
    width: 16px;
    height: 16px;
    accent-color: var(--blue-600);
    cursor: pointer;
}

.ns-checkbox-row label {
    font-size: 0.875rem;
    color: var(--zinc-600);
    cursor: pointer;
}
.dark .ns-checkbox-row label { color: var(--zinc-400); }

.ns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ns-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dark .ns-input { background: rgba(255,255,255,0.03); border-color: var(--zinc-800); color: var(--zinc-100); }
.ns-input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.ns-input::placeholder { color: var(--zinc-400); }

.ns-hint {
    font-size: 0.75rem;
    color: var(--zinc-500);
    margin-top: 0.5rem;
}

/* ===== PRICING SUMMARY ===== */
.pricing-box {
    background: var(--zinc-50);
    border-radius: 0.375rem;
    padding: 1rem;
}
.dark .pricing-box {
    background: var(--zinc-800);
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.pricing-row:last-child { margin-bottom: 0; }

.pricing-label { color: var(--zinc-500); }

.pricing-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--zinc-200);
}
.dark .pricing-total-row { border-color: var(--zinc-700); }

.pricing-total-label {
    font-weight: 500;
    font-size: 0.875rem;
}

.pricing-grand-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--zinc-200);
}
.dark .pricing-grand-total-row { border-color: var(--zinc-700); }

.pricing-grand-label { font-weight: 500; font-size: 0.875rem; }

.pricing-grand-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--blue-600);
}

/* ===== COUPON SECTION ===== */
.coupon-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--zinc-400);
    margin-bottom: 0.5rem;
    margin-left: 0.25rem;
}

.coupon-row {
    display: flex;
    gap: 0.5rem;
}

.coupon-input-wrap {
    position: relative;
    flex: 1;
}

.coupon-input-wrap svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zinc-400);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.coupon-input {
    width: 100%;
    height: 3rem;
    padding-left: 3rem;
    padding-right: 1rem;
    border: 1px solid var(--zinc-100);
    border-radius: 0.75rem;
    background: var(--zinc-50);
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dark .coupon-input {
    background: rgba(24,24,27,0.5);
    border-color: var(--zinc-800);
    color: var(--zinc-100);
}

.coupon-input:focus {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.coupon-input::placeholder { color: var(--zinc-400); }

.coupon-apply-btn {
    height: 3rem;
    padding: 0 1.5rem;
    background: var(--zinc-900);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
}

.dark .coupon-apply-btn { background: var(--zinc-800); }
.coupon-apply-btn:hover { background: var(--zinc-800); }
.dark .coupon-apply-btn:hover { background: var(--zinc-700); }
.coupon-apply-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ===== REGISTER BUTTON ===== */
.register-btn {
    width: 100%;
    height: 2.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    outline: none;
}

.register-btn:hover { opacity: 0.9; }
.register-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ===== SECURITY NOTICE ===== */
.security-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--zinc-500);
}

.security-notice svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    width: 16px;
    height: 16px;
}

/* ===== CHECK RESULT BANNER ===== */
.check-result {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.check-result.available {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    display: flex;
}

.check-result.taken {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    display: flex;
}

.dark .check-result.available {
    background: rgba(5,150,105,0.1);
    border-color: rgba(5,150,105,0.3);
}

.dark .check-result.taken {
    background: rgba(220,38,38,0.1);
    border-color: rgba(220,38,38,0.3);
}

/* ===== SPINNER ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.6s linear infinite; display: inline-block; }

/* ===== COUPON MSG ===== */
.coupon-msg { font-size: 0.8rem; margin-top: 0.375rem; }
.coupon-msg.success { color: #16a34a; }
.coupon-msg.error { color: #dc2626; }

/* ===== DURATION SELECT ===== */
.duration-select {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.875rem;
    color: var(--foreground);
    outline: none;
    cursor: pointer;
}
.dark .duration-select { background: rgba(255,255,255,0.03); border-color: var(--zinc-800); color: var(--zinc-100); }

/* ===== YEARS ROW ===== */
.years-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.years-label {
    font-size: 0.875rem;
    color: var(--zinc-500);
    white-space: nowrap;
}
</style>
/* ---------- cronjobs ---------- */
<style>

/* ---------- cronjobs ---------- */
.stc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.mb-8  { margin-bottom: 2rem; }
.stc-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #18181b;          /* zinc-900 */
    margin-bottom: .25rem;
}
.dark .stc-page-title { color: #f4f4f5; }

.stc-page-subtitle {
    font-size: .875rem;
    color: #71717a;          /* zinc-500 */
    margin: 0;
}

.stc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .stc-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- card ---------- */
.stc-card {
    background: #fff;
    border: 1px solid #e4e4e7;   /* zinc-200 */
    border-radius: 1rem;         /* rounded-2xl */
    padding: 1.5rem;
}
.dark .stc-card {
    background: #18181b;
    border-color: #27272a;
}

/* ---------- form stack ---------- */
.stc-form-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---------- labels ---------- */
.stc-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .375rem;
    color: #18181b;
}
.dark .stc-label { color: #f4f4f5; }
.stc-optional { font-weight: 400; color: #a1a1aa; font-size: .8rem; }

/* ---------- input ---------- */
.stc-input {
    display: block;
    width: 100%;
    height: 2.25rem;             /* h-9 */
    padding: .25rem .75rem;
    font-size: .875rem;
    background: #fafafa;         /* zinc-50 */
    border: 1px solid #e4e4e7;   /* zinc-200 */
    border-radius: .375rem;
    color: #18181b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.stc-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.dark .stc-input {
    background: #27272a;
    border-color: #27272a;
    color: #f4f4f5;
}
.stc-textarea {
    height: auto;
    resize: vertical;
    padding: .5rem .75rem;
}

/* ---------- URL section ---------- */
.stc-url-section { display: flex; flex-direction: column; gap: .75rem; }
.stc-url-list    { display: flex; flex-direction: column; gap: .5rem; }
.stc-url-row     { display: flex; gap: .5rem; align-items: center; }
.stc-url-input-wrap { position: relative; flex: 1; }
.stc-remove-url {
    background: none;
    border: none;
    cursor: pointer;
    color: #a1a1aa;
    padding: .25rem;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.stc-remove-url:hover { color: #ef4444; }

.stc-add-url-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    width: 100%;
    height: 2rem;
    padding: 0 .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #71717a;
    background: transparent;
    border: 1.5px dashed #d4d4d8;   /* zinc-300 */
    border-radius: .375rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.stc-add-url-btn:hover { color: #2563eb; border-color: #93c5fd; }
.dark .stc-add-url-btn { border-color: #3f3f46; }

/* ---------- two-col ---------- */
.stc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 480px) { .stc-two-col { grid-template-columns: 1fr; } }
.stc-field { display: flex; flex-direction: column; }

/* ---------- select ---------- */
.stc-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.stc-select-wrap .stc-select-arrow {
    position: absolute;
    right: .75rem;
    pointer-events: none;
    color: #a1a1aa;
}
.stc-select,
.stc-select-full {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 2.5rem;
    padding: 0 2.25rem 0 .75rem;
    font-size: .875rem;
    background: #fafafa;
    border: 1px solid #e4e4e7;
    border-radius: .375rem;
    color: #18181b;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
    box-sizing: border-box;
}
.stc-select:focus,
.stc-select-full:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.stc-select-full {
    padding-right: .75rem; /* no arrow added inline */
}
.dark .stc-select,
.dark .stc-select-full {
    background: #27272a;
    border-color: #27272a;
    color: #f4f4f5;
}

/* ---------- coupon ---------- */
.stc-coupon-section {
    padding-top: 1rem;
    border-top: 1px solid #f4f4f5;
}
.dark .stc-coupon-section { border-top-color: #27272a; }
.stc-coupon-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #a1a1aa;
    margin-bottom: .5rem;
    margin-left: .25rem;
}
.stc-coupon-row { display: flex; gap: .5rem; }
.stc-coupon-input-wrap { position: relative; flex: 1; }
.stc-coupon-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
    pointer-events: none;
}
.stc-coupon-input {
    height: 3rem !important;
    padding-left: 3rem !important;
    background: #fafafa;
    border: 1px solid #f4f4f5;
    border-radius: .75rem;
}
.dark .stc-coupon-input {
    background: rgba(24,24,27,.5);
    border-color: #27272a;
}
.stc-coupon-btn {
    height: 3rem;
    padding: 0 1.5rem;
    background: #18181b;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: none;
    border-radius: .75rem;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.stc-coupon-btn:hover { background: #27272a; }
.dark .stc-coupon-btn { background: #27272a; }
.dark .stc-coupon-btn:hover { background: #3f3f46; }
.stc-coupon-msg { font-size: .8rem; margin-top: .4rem; }
.stc-coupon-msg.success { color: #16a34a; }
.stc-coupon-msg.error   { color: #dc2626; }

/* ---------- footer row ---------- */
.stc-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #f4f4f5;
    flex-wrap: wrap;
    gap: .75rem;
}
.dark .stc-footer-row { border-top-color: #27272a; }
.stc-price-label {
    display: block;
    font-size: .75rem;
    color: #71717a;
    margin-bottom: .125rem;
}
.stc-price {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
}
.stc-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 3rem;
    padding: 0 2rem;
    background: #2563eb;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    transition: background .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.stc-submit-btn:hover { background: #1d4ed8; }

/* ---------- right col ---------- */
.stc-right-col { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- notice card --- */
.stc-notice-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #18181b;
}
.dark .stc-notice-title { color: #f4f4f5; }
.stc-notice-icon { color: #a1a1aa; flex-shrink: 0; }
.stc-notice-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .75rem;
}
.stc-notice-list li {
    display: flex;
    gap: .5rem;
    font-size: .75rem;
    color: #52525b;
    line-height: 1.5;
}
.dark .stc-notice-list li { color: #a1a1aa; }
.stc-dot { color: #3b82f6; margin-top: .25rem; flex-shrink: 0; }
.stc-extra-notice {
    margin-top: 1rem;
    font-size: .8rem;
    color: #52525b;
}

/* --- support box --- */
.stc-support-box {
    background: #eff6ff;         /* blue-50 */
    border: 1px solid #dbeafe;   /* blue-100 */
    border-radius: .75rem;
    padding: 1.5rem;
}
.dark .stc-support-box {
    background: rgba(30,58,138,.1);
    border-color: rgba(30,58,138,.3);
}
.stc-support-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: .5rem;
}
.dark .stc-support-title { color: #93c5fd; }
.stc-support-title svg { color: inherit; }
.stc-support-text {
    font-size: .75rem;
    color: #2563eb;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.dark .stc-support-text { color: #93c5fd; }
.stc-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2rem;
    padding: 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: .375rem;
    cursor: pointer;
    transition: background .15s;
}
.stc-support-btn:hover { background: #eff6ff; }
.dark .stc-support-btn { background: transparent; }
.dark .stc-support-btn:hover { background: rgba(30,58,138,.2); }
</style>
/*order hosting
<style>
*, *::before, *::after { box-sizing: border-box; }

.order-page {
    min-height: 100vh;
    background: transparent;
    padding: 16px 0 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (min-width: 640px) {
    .order-page { padding: 40px 0; }
}

.order-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== BACK BUTTON ===== */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #71717a;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 24px;
    padding: 0;
    text-decoration: none;
    transition: color 0.2s;
}

.back-btn:hover { color: #2563eb; }

.back-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #f4f4f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 16px;
}

.dark .back-btn-icon {
    background: #18181b;
    border-color: #27272a;
}

.back-btn:hover .back-btn-icon {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* ===== GRID LAYOUT ===== */
.order-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1024px) {
    .order-grid { grid-template-columns: 2fr 1fr; }
}

/* ===== SECTION LABEL ===== */
.section-label {
    font-size: 14px;
    font-weight: 700;
    color: #71717a;
    margin-left: 8px;
    margin-bottom: 16px;
}

/* ===== SETUP CARD ===== */
.setup-card {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 640px) {
    .setup-card { padding: 32px; }
}

.dark .setup-card {
    background: #18181b;
    border-color: #27272a;
}

/* Domain section */
.domain-section { display: flex; flex-direction: column; gap: 12px; }

.domain-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.domain-label-row label {
    font-size: 14px;
    font-weight: 600;
    color: #18181b;
}

.dark .domain-label-row label { color: #f4f4f5; }

.required-badge {
    font-size: 10px;
    background: #f4f4f5;
    padding: 2px 8px;
    border-radius: 4px;
    color: #71717a;
    font-weight: 700;
}

.dark .required-badge { background: #27272a; }

.domain-input-wrapper {
    position: relative;
}

.domain-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color 0.2s;
}

.domain-input-icon svg { width: 20px; height: 20px; stroke: currentColor; }

.domain-input-wrapper:focus-within .domain-input-icon { color: #2563eb; }

.domain-input {
    width: 100%;
    height: 56px;
    padding-left: 48px;
    padding-right: 16px;
    background: #fafafa;
    border: 1px solid #f4f4f5;
    border-radius: 16px;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: #18181b;
    transition: all 0.2s;
}

.dark .domain-input {
    background: #09090b;
    border-color: #27272a;
    color: #f4f4f5;
}

.domain-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.05);
    background: #fff;
}

.dark .domain-input:focus { background: #09090b; }

.domain-note {
    font-size: 11px;
    color: #71717a;
    font-style: italic;
    margin-left: 4px;
    line-height: 1.5;
}

/* Billing cycle section */
.cycle-section { display: flex; flex-direction: column; gap: 16px; }

.cycle-section > label {
    font-size: 14px;
    font-weight: 600;
    color: #18181b;
}

.dark .cycle-section > label { color: #f4f4f5; }

.cycle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .cycle-grid { grid-template-columns: repeat(4, 1fr); }
}

.cycle-btn {
    position: relative;
    padding: 16px;
    border-radius: 16px;
    border: 2px solid #f4f4f5;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    transition: all 0.2s;
}

.dark .cycle-btn {
    background: rgba(24,24,27,0.5);
    border-color: #27272a;
}

.cycle-btn:hover {
    border-color: #d4d4d8;
}

.dark .cycle-btn:hover {
    border-color: #3f3f46;
}

.cycle-btn.active {
    border-color: #2563eb;
    background: rgba(37,99,235,0.03);
}

.dark .cycle-btn.active {
    background: rgba(59,130,246,0.05);
}

.cycle-btn-label {
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
}

.cycle-btn.active .cycle-btn-label { color: #2563eb; }

.cycle-btn-price {
    font-size: 14px;
    font-weight: 700;
    color: #71717a;
}

.cycle-btn.active .cycle-btn-price {
    color: #18181b;
}

.dark .cycle-btn.active .cycle-btn-price { color: #fff; }

/* Check indicator */
.cycle-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    display: none;
    align-items: center;
    justify-content: center;
}

.cycle-btn.active .cycle-check { display: flex; }

.cycle-check svg {
    width: 10px;
    height: 10px;
    stroke: #fff;
    stroke-width: 4;
}

/* Save badge */
.cycle-save-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #10b981;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
}

.cycle-btn.active .cycle-save-badge { display: none; }

/* ===== SUMMARY CARD ===== */
.summary-section { display: flex; flex-direction: column; gap: 24px; }

.summary-card {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    padding: 12px;
}

@media (min-width: 640px) {
    .summary-card { padding: 32px; }
}

.dark .summary-card {
    background: #18181b;
    border-color: #27272a;
}

/* Summary rows */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 16px;
}

.summary-row:last-of-type { margin-bottom: 0; }

.summary-row-label { font-weight: 600; color: #71717a; }

.summary-row-value {
    font-weight: 700;
    color: #18181b;
}

.dark .summary-row-value { color: #fff; }

.summary-row-value.domain-value { color: #2563eb; word-break: break-all; text-align: right; max-width: 150px; }

.summary-divider {
    height: 1px;
    background: #f4f4f5;
    margin: 16px 0;
}

.dark .summary-divider { background: #27272a; }

.subtotal-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
}

.subtotal-label { color: #71717a; }
.subtotal-value { color: #18181b; }
.dark .subtotal-value { color: #fff; }

/* Total */
.total-section { padding-top: 16px; }

.total-hint {
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 4px;
}

.total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.total-amount {
    font-size: 30px;
    font-weight: 700;
    color: #2563eb;
    line-height: 1;
}

/* Coupon */
.coupon-section { padding-top: 8px; }

.coupon-label {
    font-size: 10px;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 8px;
    margin-left: 4px;
}

.coupon-row {
    display: flex;
    gap: 8px;
}

.coupon-input-wrap {
    position: relative;
    flex: 1;
}

.coupon-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1a1aa;
    display: flex;
    align-items: center;
}

.coupon-icon svg { width: 18px; height: 18px; stroke: currentColor; }

.coupon-input {
    width: 100%;
    height: 48px;
    padding-left: 48px;
    padding-right: 12px;
    border: 1px solid #f4f4f5;
    border-radius: 12px;
    background: #fafafa;
    font-size: 14px;
    outline: none;
    color: #18181b;
    transition: border-color 0.2s;
}

.dark .coupon-input {
    background: rgba(24,24,27,0.5);
    border-color: #27272a;
    color: #f4f4f5;
}

.coupon-input:focus { border-color: #3b82f6; }

.coupon-apply-btn {
    height: 48px;
    padding: 0 24px;
    background: #18181b;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
}

.dark .coupon-apply-btn { background: #27272a; }

.coupon-apply-btn:hover:not(:disabled) { background: #27272a; }

.dark .coupon-apply-btn:hover:not(:disabled) { background: #3f3f46; }

.coupon-apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Pay button */
.pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 16px;
    gap: 8px;
}

.pay-btn:hover { background: #1d4ed8; }
.pay-btn:active { transform: scale(0.98); }

/* Support alert */
.support-alert {
    background: rgba(239,246,255,0.5);
    border: 1px solid rgba(191,219,254,0.5);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 16px;
}

.dark .support-alert {
    background: rgba(59,130,246,0.05);
    border-color: rgba(59,130,246,0.1);
}

.support-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dark .support-icon-wrap { background: rgba(59,130,246,0.3); }

.support-icon-wrap svg { width: 20px; height: 20px; stroke: currentColor; }

.support-content h4 {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
    margin-bottom: 2px;
}

.dark .support-content h4 { color: #60a5fa; }

.support-content p {
    font-size: 11px;
    color: rgba(37,99,235,0.7);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.dark .support-content p { color: rgba(96,165,250,0.6); }

/* Sticky sidebar */
@media (min-width: 1024px) {
    .order-sidebar { position: sticky; top: 96px; }
}
</style>