/*
 * Theme "modern" — override layer, load sau styles.css gốc.
 * Chỉ override biến CSS + 1 số component mới, không đụng layout/JS của framework gốc.
 */

:root {
    /* ===== Bảng màu "gu phẳng" (evondevKit ui-ux skill, đúng https://evondev-uiux.vercel.app/ui-ux) =====
       Màu nhấn lấy đúng cam của trang demo (nút "Cài skill" + theme-color meta
       của chính trang đó: #fa5d19). Mọi biến --modern-accent* / --bs-primary*
       phía dưới đổi theo khối này, nên khoảng 100+ chỗ trong file đang dùng
       var(--modern-accent) tự đổi màu theo, không cần sửa từng chỗ một. */
    --primary-rgb: 138, 75, 234;
    --bs-primary: #8a4bea;
    --bs-primary-rgb: 138, 75, 234;
    --bs-primary-bg-subtle: rgba(138, 75, 234, .12);
    --bs-primary-border-subtle: #cfb8f7;
    --bs-primary-text-emphasis: #5b2fc4;
    --menu-bg: #0f1421;
    --menu-prime-color: #f2f2f2;
    --menu-border-color: #1c2333;
    --header-bg: #ffffff;
    --header-prime-color: #536485;
    --header-border-color: #edf0f5;
    --default-background: #f4f6fb;
    --default-border: #eef0f5;
    --bootstrap-card-border: #eef0f5;
    --modern-active-bg: #1d2740;
    --modern-active-color: #ffffff;
    --modern-accent: #8a4bea;
    --modern-accent-grad: linear-gradient(115deg, #593fe6 5%, #8a4bea 53%, #f45d9e 100%);
    --modern-accent-hover: #6f3bd1;
    /* Màu nhấn có sắc (cam) thì bản mờ-trên-nền dùng chính màu đó pha loãng,
       không phải xám trung tính — đúng ghi chú gốc của skill ở --primary-light
       trong tokens.css. */
    --modern-accent-soft: rgba(138, 75, 234, .12);

    /* ===== Token "gu phẳng" (evondevKit ui-ux skill) =====
       Nền trang xám rất nhạt, card trắng viền chỉ-tóc, không bóng trong trang,
       bo 12px cho control ≥40px / 8px cho control nhỏ hơn, bóng chỉ dành cho lớp
       nổi — lấy đúng số từ tokens.css của skill. */
    --basic-bg: #f4f4f6;
    --basic-surface: #ffffff;
    --basic-surface-2: #f4f6fb;
    --basic-foreground: #2c2c2c;
    --basic-muted: #707070;
    --basic-border: #f0f0f2;
    --basic-border-strong: #e4e4e7;
    --basic-ring-focus: rgba(138, 75, 234, .14);
    --basic-radius-lg: .75rem;
    --basic-radius-sm: .5rem;
    --basic-radius-full: 999px;
    --basic-shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --basic-shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --basic-success-bg: #ecfdf5;
    --basic-success: #007a55;
    --basic-warning-bg: #fffbeb;
    --basic-warning: #bb4d00;
    --basic-danger-bg: #fef2f2;
    --basic-danger: #c70036;
    --basic-neutral-bg: #f4f4f5;
    --basic-neutral: #52525c;

    --default-background: var(--basic-bg);
    --default-border: var(--basic-border-strong);
    --bootstrap-card-border: var(--basic-border-strong);
}

/* ---------- Primary buttons: nền nhấn phẳng, không gradient/bóng (gu flat) ---------- */
[data-theme="basic"] .btn-primary {
    background: var(--modern-accent);
    border: none;
    border-radius: var(--basic-radius-lg);
    font-weight: 600;
    box-shadow: none;
}

[data-theme="basic"] .btn-primary:hover,
[data-theme="basic"] .btn-primary:focus,
[data-theme="basic"] .btn-primary:active {
    background: color-mix(in srgb, var(--modern-accent) 88%, #000) !important;
    box-shadow: none !important;
}

[data-theme="basic"] {
    --default-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}
[data-theme="basic"] body {
    font-size: 0.92rem;
}
[data-theme="basic"] body,
[data-theme="basic"] .card,
[data-theme="basic"] .btn,
[data-theme="basic"] .form-control,
[data-theme="basic"] .form-select,
[data-theme="basic"] .nav-link,
[data-theme="basic"] h1,
[data-theme="basic"] h2,
[data-theme="basic"] h3,
[data-theme="basic"] h4,
[data-theme="basic"] h5,
[data-theme="basic"] h6 {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
    background-color: var(--default-background);
}

/* ---------- Form controls (input / select / textarea) ---------- */
[data-theme="basic"] .form-control,
[data-theme="basic"] .form-select,
[data-theme="basic"] textarea.form-control,
[data-theme="basic"] .input-group-text {
    background-color: var(--basic-surface);
    border: 1px solid var(--basic-border-strong);
    border-radius: var(--basic-radius-sm);
    color: var(--basic-foreground);
    padding: 10px 14px;
}

[data-theme="basic"] .form-control::placeholder {
    color: var(--basic-muted);
}

[data-theme="basic"] .form-control:focus,
[data-theme="basic"] .form-select:focus {
    background-color: var(--basic-surface);
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

[data-theme="basic"] .input-group .form-control,
[data-theme="basic"] .input-group .form-select {
    border-radius: 10px;
}

[data-theme="basic"] .input-group:not(.has-validation) > .form-control:not(:last-child),
[data-theme="basic"] .input-group:not(.has-validation) > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[data-theme="basic"] .input-group > .form-control:not(:first-child),
[data-theme="basic"] .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[data-theme="basic"] .input-group-text {
    border-radius: 10px 0 0 10px;
    color: var(--basic-muted);
}

/* Nhiều <select> trong codebase dùng class "form-control" (không phải "form-select"),
   mà .form-control đặt appearance:none không kèm background-image mũi tên -> mất icon dropdown. */
[data-theme="basic"] select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa2b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 10px;
    padding-right: 36px;
}

/* ---------- Badges (pill + dot, soft pastel) ---------- */
[data-theme="basic"] .badge {
    border-radius: 999px !important;
    font-weight: 600;
    padding: 5px 12px 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

[data-theme="basic"] .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

[data-theme="basic"] .badge.bg-success,
[data-theme="basic"] .badge.bg-success-subtle {
    background-color: rgba(34, 197, 94, .14) !important;
    color: #17c964 !important;
}

[data-theme="basic"] .badge.bg-warning,
[data-theme="basic"] .badge.bg-warning-subtle {
    background-color: rgba(245, 158, 11, .14) !important;
    color: #ff9f43 !important;
}

[data-theme="basic"] .badge.bg-danger,
[data-theme="basic"] .badge.bg-danger-subtle {
    background-color: rgba(244, 63, 94, .14) !important;
    color: #f5365c !important;
}

[data-theme="basic"] .badge.bg-primary,
[data-theme="basic"] .badge.bg-primary-subtle {
    background-color: var(--modern-accent-soft) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .badge.bg-info,
[data-theme="basic"] .badge.bg-info-subtle {
    background-color: rgba(59, 130, 246, .14) !important;
    color: #17a2b8 !important;
}

[data-theme="basic"] .badge.bg-secondary,
[data-theme="basic"] .badge.bg-secondary-subtle {
    background-color: var(--basic-surface-2) !important;
    color: var(--basic-muted) !important;
}

[data-theme="basic"] .badge.bg-dark {
    background-color: var(--basic-surface-2) !important;
    color: var(--basic-foreground) !important;
}

[data-theme="basic"] .p-card {
    padding: 18px;
    border-radius: 16px;
    background: var(--basic-surface-2);
    border: 1px solid var(--basic-border-strong);
}
[data-theme="basic"] .card-body {
    padding: 25px;
}
[data-theme="basic"] .card-title + .card-body:has(table) {
    padding-top: 0px;
}
[data-theme="basic"] .card-title h4, [data-theme="basic"] .card-title h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--basic-foreground);
    margin: 0;
}
[data-theme="basic"] .card-title {
    padding: 20px 25px;
    border-bottom: 1px solid var(--basic-border-strong);
    margin-bottom: 0;
}
/* ---------- Alerts (soft pastel, rounded) ---------- */
[data-theme="basic"] .alert {
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    padding: 15px;
}

[data-theme="basic"] .alert-info {
    background-color: rgba(59, 130, 246, .14);
    color: #2563eb;
    border-color: rgba(59, 130, 246, .35);
}

[data-theme="basic"] .alert-warning {
    background-color: rgba(245, 158, 11, .14);
    color: #d97706;
    border-color: rgba(245, 158, 11, .35);
}

[data-theme="basic"] .alert-danger {
    background-color: rgba(244, 63, 94, .14);
    color: #e11d48;
    border-color: rgba(244, 63, 94, .35);
}

[data-theme="basic"] .alert-success {
    background-color: rgba(34, 197, 94, .14);
    color: #16a34a;
    border-color: rgba(34, 197, 94, .35);
}

[data-theme="basic"] .alert-primary {
    background-color: var(--modern-accent-soft);
    color: var(--modern-accent);
    border-color: var(--basic-border-strong);
}

[data-theme="basic"] .alert-secondary {
    background-color: var(--basic-surface-2);
    color: var(--basic-muted);
    border-color: var(--basic-border-strong);
}

/* ---------- Sidebar ---------- */
[data-theme="basic"] .startbar {
    background-color: var(--menu-bg);
}

[data-theme="basic"] .startbar .menu-label span {
    color: var(--basic-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link,
[data-theme="basic"] .startbar .navbar-nav .collapse .nav-link {
    color: var(--menu-prime-color);
    border-radius: 8px;
    margin: 2px 10px;
}

[data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link:hover,
[data-theme="basic"] .startbar .navbar-nav .collapse .nav-link:hover {
    background-color: var(--modern-active-bg);
    color: #fff;
}

[data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link.active,
[data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
    /* Mục sidebar đang chọn: nền trung tính mờ + chữ đậm, không dùng màu nhấn (locked-rules #8) */
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 600;
}

[data-theme="basic"] .modern-breadcrumb {
    font-size: 14px;
    color: var(--header-prime-color);
    margin-left: 8px;
}

[data-theme="basic"] .modern-breadcrumb a {
    color: var(--header-prime-color);
    text-decoration: none;
}

[data-theme="basic"] .modern-breadcrumb span {
    color: var(--basic-foreground);
    font-weight: 600;
}

[data-theme="basic"] .modern-search {
    max-width: 420px;
    margin-left: 24px;
}

[data-theme="basic"] .modern-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

[data-theme="basic"] .modern-search-form i {
    position: absolute;
    left: 14px;
    color: var(--basic-muted);
    font-size: 16px;
}

[data-theme="basic"] .modern-search-form input {
    padding-left: 38px;
    padding-right: 60px;
    border-radius: 10px;
    background-color: var(--default-background);
    border: 1px solid var(--default-border);
}

[data-theme="basic"] .modern-search-kbd {
    position: absolute;
    right: 10px;
    background: var(--basic-surface);
    border: 1px solid var(--default-border);
    color: var(--basic-muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
}

/* ---------- Cards: gu flat — viền chỉ-tóc, không bóng trong trang (budgets.md) ---------- */
[data-theme="basic"] .card {
    border-radius: var(--basic-radius-lg);
    border: 1px solid var(--basic-border-strong);
    box-shadow: none;
}

[data-theme="basic"] .card-header {
    border-radius: calc(var(--basic-radius-lg) - 2px) calc(var(--basic-radius-lg) - 2px) 0 0 !important;
}

/* ---------- Stat card (Kiếm tiền / affiliate) ---------- */
[data-theme="basic"] .modern-stat-card {
    background: var(--basic-surface);
    border-radius: var(--basic-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--basic-border-strong);
    box-shadow: none;
}

[data-theme="basic"] .modern-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

[data-theme="basic"] .modern-stat-icon.purple { background: rgba(139, 92, 246, .16); color: #7c4dff; }
[data-theme="basic"] .modern-stat-icon.green  { background: rgba(34, 197, 94, .16); color: #17c964; }
[data-theme="basic"] .modern-stat-icon.blue   { background: rgba(59, 130, 246, .16); color: #3f6cf5; }
[data-theme="basic"] .modern-stat-icon.orange { background: rgba(245, 158, 11, .16); color: #ff9f43; }

[data-theme="basic"] .modern-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--basic-foreground);
    line-height: 1.2;
}

[data-theme="basic"] .modern-stat-label {
    font-size: 13px;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-stat-sub {
    font-size: 12px;
    color: var(--basic-muted);
}

/* ---------- Step indicator (Tạo website mới) ---------- */
[data-theme="basic"] .modern-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

[data-theme="basic"] .modern-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--basic-muted);
    font-size: 13px;
}

[data-theme="basic"] .modern-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--default-background);
    color: var(--basic-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

[data-theme="basic"] .modern-step.active .modern-step-circle {
    background: var(--modern-accent);
    color: #fff;
}

[data-theme="basic"] .modern-step.active {
    color: var(--basic-foreground);
    font-weight: 600;
    background: var(--modern-accent-soft);
    border-radius: 999px;
    padding: 4px 14px 4px 4px;
}

[data-theme="basic"] .modern-step-line {
    flex: 1;
    height: 2px;
    background: var(--default-border);
    min-width: 24px;
}

[data-theme="basic"] .modern-step-line.active {
    background: linear-gradient(to right, var(--modern-accent), var(--default-border));
}

/* ---------- Segmented control (pill track, white active pill) ---------- */
[data-theme="basic"] .modern-segment-control {
    display: flex;
    background: var(--basic-surface-2);
    border: 1px solid var(--basic-border-strong);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

[data-theme="basic"] .modern-segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--basic-muted);
    border-radius: 8px;
    transition: all .2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

[data-theme="basic"] .modern-segment-btn:hover {
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-segment-btn.active {
    background: var(--basic-surface);
    color: var(--basic-foreground);
    box-shadow: 0 1px 3px rgba(25, 33, 61, .1);
}

[data-theme="basic"] .modern-segment-btn img {
    height: 18px;
}

/* ---------- Crypto exchange rate card (Nạp Crypto) ---------- */
[data-theme="basic"] .crypto-rate-card {
    background: rgba(139, 92, 246, .14);
    border: 1px solid var(--basic-border-strong);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

[data-theme="basic"] .crypto-rate-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--basic-muted);
    margin-bottom: 10px;
}

[data-theme="basic"] .crypto-rate-header i {
    color: var(--modern-accent);
}

[data-theme="basic"] .crypto-rate-main {
    font-size: 22px;
    font-weight: 700;
    color: var(--basic-foreground);
}

[data-theme="basic"] .crypto-rate-sub {
    font-size: 12px;
    color: var(--basic-muted);
    margin-top: 2px;
}

[data-theme="basic"] .crypto-rate-divider {
    border-top: 1px dashed var(--basic-border-strong);
    margin: 12px 0;
}

[data-theme="basic"] .crypto-rate-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--basic-muted);
}

/* ---------- Tab selector (Nạp tiền: Ngân hàng/Crypto/Thẻ cào/Gift) ---------- */
[data-theme="basic"] .modern-tab-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

[data-theme="basic"] .modern-tab-btn {
    border: 1px solid var(--default-border);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--basic-surface);
    color: var(--basic-muted);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

[data-theme="basic"] .modern-tab-btn.active {
    border-color: var(--modern-accent);
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
}

/* ---------- Circular share buttons ---------- */
[data-theme="basic"] .modern-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: none;
    font-size: 16px;
}

[data-theme="basic"] .modern-share-btn:hover {
    filter: brightness(0.92);
}

[data-theme="basic"] .modern-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: var(--basic-muted);
}

/* ---------- Plain underline tabs (API & Tích hợp) ---------- */
[data-theme="basic"] .modern-tab-selector-tabs {
    border-bottom: 1px solid var(--default-border);
    padding-top: 12px;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

[data-theme="basic"] .modern-tab-selector-tabs .nav-link {
    color: var(--basic-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 2px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}

[data-theme="basic"] .modern-tab-selector-tabs .nav-link.active {
    color: var(--modern-accent);
    border-bottom-color: var(--modern-accent);
}

/* Variant: tabs sitting inline beside a card-title heading — no own separator,
   card-title's border-bottom already closes off the whole row. */
[data-theme="basic"] .modern-tab-selector-tabs--inline {
    border-bottom: none;
    padding-top: 0;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
}

/* ---------- Selectable tile (chọn ngân hàng / loại thẻ / mệnh giá) ---------- */
[data-theme="basic"] .selectable-tile {
    border: 1px solid var(--default-border) !important;
    background-color: var(--basic-surface) !important;
    color: var(--basic-foreground);
    transition: all .15s ease;
}
[data-theme="basic"] .selectable-tile:hover {
    border-color: var(--basic-border-strong) !important;
    background-color: var(--default-background) !important;
}
[data-theme="basic"] .btn-check:checked + .selectable-tile.accent-primary {
    border-color: var(--modern-accent) !important;
    background-color: var(--modern-accent-soft) !important;
    box-shadow: 0 0 0 2px var(--modern-accent-soft);
}
[data-theme="basic"] .btn-check:checked + .selectable-tile.accent-success {
    border-color: #17c964 !important;
    background-color: rgba(34, 197, 94, .14) !important;
    box-shadow: 0 0 0 2px rgba(23, 201, 100, .12);
}

/* ---------- Method tabs (#pills-tabs): mỗi phương thức 1 màu riêng ---------- */
[data-theme="basic"] #bank-tab.active { border-color: var(--modern-accent) !important; background: var(--modern-accent-soft) !important; color: var(--modern-accent) !important; }
[data-theme="basic"] #crypto-tab.active { border-color: var(--modern-accent) !important; background: var(--modern-accent-soft) !important; color: var(--modern-accent) !important; }
[data-theme="basic"] #card-tab.active { border-color: var(--modern-accent) !important; background: var(--modern-accent-soft) !important; color: var(--modern-accent) !important; }
[data-theme="basic"] #razorpay-tab.active { border-color: var(--modern-accent) !important; background: var(--modern-accent-soft) !important; color: var(--modern-accent) !important; }

/* ---------- Tier panel (Cấp bậc thành viên) ---------- */
[data-theme="basic"] .tier-panel {
    background: var(--basic-surface);
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid #e8ebf1;
    box-shadow: 0 1px 3px rgba(25, 33, 61, .04), 0 10px 30px rgba(25, 33, 61, .05);
}

[data-theme="basic"] .tier-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

[data-theme="basic"] .tier-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="basic"] .tier-head-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffd66b, #ff9f43);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="basic"] .section-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--basic-foreground);
}

[data-theme="basic"] .tier-head-sub {
    font-size: 12px;
    color: var(--basic-muted);
}

[data-theme="basic"] .tier-collapse-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--default-border);
    background: var(--default-background);
    color: var(--basic-muted);
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

[data-theme="basic"] .tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
}

[data-theme="basic"] .tier {
    position: relative;
    border: 1px solid var(--default-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

[data-theme="basic"] .tier-btn {
    margin-top: auto;
}

[data-theme="basic"] .tier.is-current {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .14);
}

[data-theme="basic"] .tier-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="basic"] .tier .medal {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

[data-theme="basic"] .tier-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .tier-amount {
    font-weight: 700;
    font-size: 19px;
    color: var(--modern-accent);
}

[data-theme="basic"] .tier-amount.free {
    color: #17c964;
}

[data-theme="basic"] .tier-caption {
    font-size: 11px;
    color: var(--basic-muted);
}

[data-theme="basic"] .tier-note {
    font-size: 12.5px;
    color: var(--basic-muted);
    line-height: 1.7;
    flex: 1;
}

[data-theme="basic"] .tier-btn {
    display: block;
    text-align: center;
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 600;
    font-size: 13px;
    border: none;
    text-decoration: none;
}

[data-theme="basic"] .tier-btn.btn-current {
    background: rgba(34, 197, 94, .14);
    color: #16a34a;
}

[data-theme="basic"] .tier-btn.btn-upgrade {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
}

[data-theme="basic"] .tier-btn.btn-upgrade:not(:disabled):hover {
    background: var(--modern-accent);
    color: #fff;
}

@media (max-width: 991px) {
    [data-theme="basic"] .tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    [data-theme="basic"] .tier-collapse-btn {
        display: flex;
    }

    [data-theme="basic"] .tiers {
        grid-template-columns: 1fr;
        display: none;
    }

    [data-theme="basic"] .tier-panel.is-open .tiers {
        display: grid;
    }

    [data-theme="basic"] .tier-panel.is-open .tier-collapse-btn {
        transform: rotate(180deg);
    }
}

/* ---------- Profile page ---------- */
[data-theme="basic"] .card .card-header {
    background: none !important;
    border-radius: 1.125rem 1.125rem 0 0;
    border-bottom: 1px solid var(--basic-border-strong) !important;
    padding: 20px 25px !important;
}

[data-theme="basic"] .card .card-header .pure-card-title,
[data-theme="basic"] .card .card-header h3,
[data-theme="basic"] .card .card-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--basic-foreground) !important;
}

/* Icon tròn nền xanh nhạt trước tiêu đề card (svg gốc fill trắng -> đổi sang xanh) */
[data-theme="basic"] .pure-card-title span.text-primary,
[data-theme="basic"] .pure-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

[data-theme="basic"] .pure-card-title span.text-primary svg {
    width: 18px;
    height: 18px;
}

[data-theme="basic"] .pure-card-title span.text-primary svg path {
    fill: var(--modern-accent);
}

[data-theme="basic"] .profile-side-card {
    background: var(--basic-neutral-bg);
    border: 1px solid var(--basic-border-strong);
}

[data-theme="basic"] .profile-avatar {
    width: 124px;
    height: 124px;
    border: 4px solid var(--basic-border-strong);
    box-shadow: 0 4px 14px rgba(63, 108, 245, .18);
}

[data-theme="basic"] .avatar-upload-btn {
    background: var(--modern-accent) !important;
    color: #fff !important;
    border: 2px solid var(--basic-border-strong) !important;
}

[data-theme="basic"] .profile-username {
    font-size: 20px;
}

[data-theme="basic"] .profile-level-pill {
    display: inline-block;
    background: var(--basic-surface);
    color: var(--modern-accent);
    border: 1px solid var(--basic-border-strong);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 600;
}

[data-theme="basic"] .profile-quicklink a.active {
    background: var(--modern-accent-soft) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .profile-quicklink a.active::after {
    background: var(--modern-accent) !important;
}

[data-theme="basic"] .profile-balance-box {
    background: var(--basic-surface) !important;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(37, 83, 185, .08);
}

[data-theme="basic"] .profile-info-list li {
    border-bottom: 1px dashed var(--basic-border-strong);
}

[data-theme="basic"] .profile-info-list li:last-child {
    border-bottom: 0;
}

[data-theme="basic"] .profile-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

[data-theme="basic"] .profile-info-label {
    font-size: 12px;
    color: var(--basic-muted);
    line-height: 1.2;
}

[data-theme="basic"] .profile-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--basic-foreground);
    line-height: 1.3;
}

[data-theme="basic"] .profile-mini-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

[data-theme="basic"] .profile-mini-badge.is-warning {
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
}

[data-theme="basic"] .profile-mini-badge.is-success {
    background: rgba(34, 197, 94, .14);
    color: #17c964;
}

[data-theme="basic"] .profile-completion-ring,
[data-theme="basic"] .profile-completion-ring .progress-circle {
    width: 76px !important;
    height: 76px !important;
}

[data-theme="basic"] .profile-completion-ring .progress-circle > div {
    width: 62px !important;
    height: 62px !important;
    color: var(--modern-accent);
    font-size: 16px !important;
}

[data-theme="basic"] .profile-check-chip {
    background: var(--basic-surface);
    border-color: var(--basic-border-strong) !important;
    border-radius: 10px !important;
}

[data-theme="basic"] .profile-check-chip .chip-icon {
    border-radius: 10px !important;
}

/* Input có icon bên trái (form profile) */
[data-theme="basic"] .field-icon-wrap {
    position: relative;
}

[data-theme="basic"] .field-icon-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--basic-muted);
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
}

[data-theme="basic"] .field-icon-wrap .form-control {
    padding-left: 40px;
}

[data-theme="basic"] .profile-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--basic-foreground);
}

[data-theme="basic"] .profile-form .form-control {
    background: var(--basic-surface);
    border-color: var(--basic-border-strong);
    height: 44px;
}

[data-theme="basic"] .profile-form .form-control:disabled,
[data-theme="basic"] .profile-form .form-control[readonly] {
    background: var(--basic-surface);
    color: var(--basic-muted);
}

[data-theme="basic"] .profile-terms-box .btn,
[data-theme="basic"] .profile-terms-box a.btn {
    border-radius: 999px;
}

[data-theme="basic"] .btn.bs-tooltip,
[data-theme="basic"] .btn-warning,
[data-theme="basic"] .btn-success,
[data-theme="basic"] .btn-sm {
    border-radius: 999px;
}

/* ---------- Guide / accordion panel ---------- */
[data-theme="basic"] .modern-guide-panel .accordion {
    padding: 4px 16px 16px;
}

[data-theme="basic"] .modern-guide-panel .accordion-item {
    border: none;
    margin-bottom: 10px;
}

[data-theme="basic"] .modern-guide-panel .accordion-button {
    background: var(--default-background);
    border-radius: 12px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--basic-foreground);
    box-shadow: none;
}

[data-theme="basic"] .modern-guide-panel .accordion-button i {
    color: var(--modern-accent);
}

[data-theme="basic"] .modern-guide-panel .accordion-button:not(.collapsed) {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    border-radius: 12px 12px 0 0 !important;
}

[data-theme="basic"] .modern-guide-panel .accordion-button::after {
    width: 0.9rem;
    height: 0.9rem;
    background-size: 0.9rem;
}

[data-theme="basic"] .guide-step-item {
    background: var(--default-background);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--basic-muted);
    line-height: 1.6;
}

/* ---------- Recharge method tabs (#pills-tabs) tái dùng style tab-selector ---------- */
[data-theme="basic"] #pills-tabs.nav-pills .nav-link {
    border-radius: 10px !important;
    border: 1px solid var(--default-border) !important;
    background: var(--basic-surface);
    color: var(--basic-muted);
    font-weight: 600;
}

[data-theme="basic"] #pills-tabs.nav-pills .nav-link.active {
    border-color: var(--modern-accent) !important;
    background: var(--modern-accent-soft) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active {
    border-color: none !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    font-weight: 600;
}
[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active .menu-icon {
    color: #fff !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active, .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover, .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active i, .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover i {
    color: #fff;
}
.navbar-nav > li > .primary-hover-bg:focus::before, .navbar-nav > li > .primary-hover-bg:hover::before, .navbar-nav > li > .primary-hover-bg.active::before {
    display: none;
}
[data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link.active, [data-theme="basic"] .startbar .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, .08) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] i, .startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] span, .startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    color: #fff !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav .nav-item {
    margin-left: 28px;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link {
    color: var(--menu-prime-color);
    margin: 2px 10px;
}
.startbar .startbar-menu .startbar-collapse {
    padding: 0 
}
[data-theme="basic"] .startbar {
    background: linear-gradient(180deg, #101a2d 0, #0c1322 100%);
}
[data-theme="basic"] .btn-green {
    background: #16a34a
}
[data-theme="basic"] .btn-red {
    background: #dc2626
}
[data-theme="basic"] .profile-completion-ring {
    --bs-secondary-bg: var(--basic-border-strong);
}

[data-theme="basic"] .profile-completion-ring + div h6 {
    font-size: 18px;
    color: var(--basic-foreground);
}

/* ---------- Outline buttons: màu nhấn của theme (bootstrap gốc hard-code xanh #3167f3) ---------- */
[data-theme="basic"] .btn-outline-primary {
    --bs-btn-color: var(--modern-accent);
    --bs-btn-border-color: var(--modern-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--modern-accent);
    --bs-btn-hover-border-color: var(--modern-accent);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--modern-accent);
    --bs-btn-active-border-color: var(--modern-accent);
    --bs-btn-disabled-color: var(--modern-accent);
    --bs-btn-disabled-border-color: var(--modern-accent);
    border-radius: var(--basic-radius-lg);
    font-weight: 600;
}

[data-theme="basic"] .profile-form .btn-link {
    color: var(--modern-accent);
}

/* ---------- Profile: hộp "Đã ký điều khoản" ---------- */
[data-theme="basic"] .profile-terms-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(34, 197, 94, .14);
    border: 1px solid #d1fae5;
    border-radius: 12px;
}

[data-theme="basic"] .profile-terms-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(34, 197, 94, .14);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

[data-theme="basic"] .profile-terms-title {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    line-height: 1.3;
}

[data-theme="basic"] .profile-terms-meta {
    font-size: 11px;
    color: var(--basic-muted);
    margin-top: 2px;
    line-height: 1.3;
}

[data-theme="basic"] .profile-terms-btn {
    background: #16a34a;
    color: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

[data-theme="basic"] .profile-terms-btn:hover {
    background: #15803d;
    color: #fff;
}

[data-theme="basic"] .profile-terms-box.profile-terms-header {
    max-width: 400px;
}

/* ---------- Topbar: search + icon buttons + pills (giống hacklike17) ---------- */
[data-theme="basic"] .modern-search {
    position: relative;
    flex: 0 1 420px;
    margin-left: 16px;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px 0 14px;
    background: var(--basic-surface);
    border: 1px solid var(--default-border);
    border-radius: 12px;
}

[data-theme="basic"] .modern-search > i {
    color: var(--basic-muted);
    font-size: 16px;
}

[data-theme="basic"] .modern-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-search kbd {
    background: var(--basic-surface-2);
    color: var(--basic-muted);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

[data-theme="basic"] .modern-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: 460px;
    overflow-y: auto;
    padding: 8px;
    background: var(--basic-surface);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
}

[data-theme="basic"] .modern-search-group {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-search-item:hover,
[data-theme="basic"] .modern-search-item.is-active {
    background: var(--default-background);
}

[data-theme="basic"] .modern-search-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

[data-theme="basic"] .modern-search-name {
    font-size: 14px;
    font-weight: 600;
}

[data-theme="basic"] .modern-search-empty {
    padding: 14px;
    text-align: center;
    color: var(--basic-muted);
    font-size: 13px;
}

[data-theme="basic"] .modern-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--basic-surface);
    border: 1px solid var(--default-border);
    color: var(--basic-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
}

[data-theme="basic"] .modern-icon-btn:hover {
    color: var(--modern-accent);
    border-color: var(--modern-accent-soft);
}

[data-theme="basic"] .modern-icon-btn::after {
    display: none;
}

[data-theme="basic"] .modern-pill {
    height: 38px;
    padding: 0 12px 0 6px;
    background: var(--basic-surface);
    border: 1px solid var(--default-border);
    border-radius: 999px;
    color: var(--basic-foreground);
    font-size: 14px;
    text-decoration: none;
}

[data-theme="basic"] .modern-pill::after {
    display: none;
}

[data-theme="basic"] .modern-user-pill {
    height: 44px;
    padding-right: 10px;
}

[data-theme="basic"] .modern-user-summary {
    display: flex;
    min-width: 0;
    max-width: 150px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.05;
}

[data-theme="basic"] .modern-user-summary-name {
    display: block;
    width: 100%;
    color: var(--basic-foreground);
    font-size: 13px;
    font-weight: 700;
}

[data-theme="basic"] .modern-user-summary small {
    display: block;
    margin-top: 4px;
    color: var(--basic-muted);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

[data-theme="basic"] .modern-user-summary small strong {
    color: var(--modern-accent);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .modern-user-pill {
        padding-left: 5px;
        padding-right: 7px;
    }

    [data-theme="basic"] .modern-user-pill > img {
        width: 28px;
        height: 28px;
        margin-right: 6px !important;
    }

    [data-theme="basic"] .modern-user-summary {
        display: flex !important;
        max-width: 100px;
    }

    [data-theme="basic"] .modern-user-summary-name {
        font-size: 12px;
    }

    [data-theme="basic"] .modern-user-summary small {
        font-size: 9px;
    }

    [data-theme="basic"] .modern-user-pill .modern-pill-caret {
        margin-left: 3px !important;
    }
}

[data-theme="basic"] .modern-pill:hover {
    color: var(--basic-foreground);
    border-color: var(--basic-border-strong);
}

[data-theme="basic"] .modern-search kbd {
    font-family: inherit;
    text-transform: none;
}


/* ---------- Topbar dropdowns (ngôn ngữ / thông báo / user) ---------- */
[data-theme="basic"] .modern-pill .modern-pill-caret {
    font-size: 14px;
    color: var(--basic-muted);
    transition: transform .2s ease;
}

[data-theme="basic"] .modern-pill.show .modern-pill-caret {
    transform: rotate(180deg);
}

[data-theme="basic"] .modern-lang-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--basic-muted);
    min-width: 22px;
    margin-left: 6px;
}

[data-theme="basic"] .modern-lang-menu,
[data-theme="basic"] .modern-notif-menu,
[data-theme="basic"] .modern-user-menu {
    border: 1px solid var(--default-border);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    padding: 10px;
    background: var(--basic-surface);
}

[data-theme="basic"] .modern-lang-menu {
    width: 240px;
}

[data-theme="basic"] .modern-lang-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 8px;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-lang-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-lang-list {
    max-height: 320px;
    overflow-y: auto;
}

[data-theme="basic"] .modern-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-lang-menu .dropdown-item:hover {
    background: var(--default-background);
}

[data-theme="basic"] .modern-lang-menu .dropdown-item.active {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    font-weight: 700;
}

[data-theme="basic"] .modern-lang-menu .dropdown-item.active .modern-lang-code {
    color: var(--modern-accent);
}

[data-theme="basic"] .modern-menu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
}

[data-theme="basic"] .modern-notif-menu {
    width: 340px;
    max-width: calc(100vw - 24px);
}

[data-theme="basic"] .modern-notif-list {
    max-height: 380px;
    overflow-y: auto;
}

[data-theme="basic"] .modern-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 6px;
    border-bottom: 1px dashed var(--basic-border-strong);
}

[data-theme="basic"] .modern-notif-item:last-child {
    border-bottom: 0;
}

[data-theme="basic"] .modern-notif-date {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #f5365c;
    white-space: nowrap;
}

[data-theme="basic"] .modern-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a2a9b6;
    display: inline-block;
}

[data-theme="basic"] .modern-notif-text {
    font-size: 13px;
    color: var(--basic-foreground);
    line-height: 1.5;
    min-width: 0;
}


[data-theme="basic"] .modern-user-menu {
    width: 250px;
}

[data-theme="basic"] .modern-user-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 12px;
    border-bottom: 1px solid var(--basic-border-strong);
    margin-bottom: 6px;
}

[data-theme="basic"] .modern-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--basic-foreground);
    line-height: 1.2;
}

[data-theme="basic"] .modern-user-balance {
    padding: 4px 10px 8px;
    font-size: 12px;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-user-balance strong {
    color: var(--modern-accent);
}

[data-theme="basic"] .modern-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-user-menu .dropdown-item i {
    font-size: 18px;
    color: var(--basic-muted);
}

[data-theme="basic"] .modern-user-menu .dropdown-item:hover {
    background: var(--default-background);
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-user-menu .dropdown-item.text-danger,
[data-theme="basic"] .modern-user-menu .dropdown-item.text-danger i {
    color: #f5365c !important;
}

[data-theme="basic"] .modern-pill:focus,
[data-theme="basic"] .modern-pill:focus-visible,
[data-theme="basic"] .modern-icon-btn:focus,
[data-theme="basic"] .modern-icon-btn:focus-visible {
    outline: 0;
    box-shadow: none;
}

[data-theme="basic"] .modern-pill.show,
[data-theme="basic"] .modern-icon-btn.show {
    border-color: var(--basic-border-strong);
}

[data-theme="basic"] .modern-bell-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f5365c;
    border: 2px solid var(--basic-border-strong);
    box-sizing: content-box;
}
[data-theme="basic"] .topbar.d-print-none {
    border-radius: 0;
    margin-left: -15px!important;
    width: calc(100% + 15px)!important;
}

[data-theme="basic"] .modern-card-head h4,
[data-theme="basic"] .modern-card-head h3,
[data-theme="basic"] .modern-card-head h2 {
    margin: 0;
}
div.dt-container div.dt-length select,div.dt-container div.dt-search input,[data-theme="basic"] .select-status .form-select, [data-theme="basic"] #date-range-picker input {
    padding: 5px 10px;
}
/* ---------- Proxy pages ---------- */
[data-theme="basic"] .modern-proxy-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

[data-theme="basic"] .modern-proxy-tabs .nav-link {
    border: 1px solid var(--default-border);
    background: var(--basic-surface);
    color: var(--basic-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
}

[data-theme="basic"] .modern-proxy-tabs .nav-link:hover {
    border-color: var(--basic-border-strong);
    color: var(--modern-accent);
}

[data-theme="basic"] .modern-proxy-tabs .nav-link.active {
    background: var(--modern-accent-soft) !important;
    border-color: var(--modern-accent) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .modern-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

[data-theme="basic"] .modern-check-list li {
    position: relative;
    padding-left: 28px;
    font-size: 14px;
    color: var(--basic-foreground);
    line-height: 1.5;
}

[data-theme="basic"] .modern-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--modern-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d5ffa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

[data-theme="basic"] .modern-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: var(--basic-surface-2);
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
}

[data-theme="basic"] .modern-total-box .total {
    font-size: 22px;
    font-weight: 800;
    color: #f5365c;
}

[data-theme="basic"] .proxy-tool-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .15s;
}

[data-theme="basic"] .proxy-tool-item:hover {
    background: var(--default-background);
}

[data-theme="basic"] .proxy-tool-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

[data-theme="basic"] .proxy-tool-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--basic-foreground);
}

[data-theme="basic"] .proxy-tool-desc {
    font-size: 12px;
    color: var(--basic-muted);
    line-height: 1.4;
}

/* ---------- Sidebar: icon SVG thay ảnh, chevron SVG, dot cho menu con ---------- */
[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--bs-menu-icon-color, currentColor);
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-icon svg {
    width: 20px;
    height: 20px;
}

[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link.has-svg-chev[data-bs-toggle=collapse]::after {
    display: none !important;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-chev {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform .2s ease;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-chev svg {
    width: 14px;
    height: 14px;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link[aria-expanded=true] .sb-chev {
    transform: rotate(90deg);
}

[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] .sb-icon,
[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] .sb-chev {
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    margin-right: 10px;
    flex-shrink: 0;
    display: inline-block;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link.active .sb-dot,
[data-theme="basic"] .startbar .startbar-menu .nav-link:hover .sb-dot {
    opacity: 1;
    background: var(--modern-accent);
}

body[data-sidebar-size=collapsed] .startbar:not(:hover) .startbar-menu .nav-link .sb-chev {
    display: none;
}

/* ---------- Sidebar card: header tint + icon trắng bo góc (giống "Video hướng dẫn") ---------- */
[data-theme="basic"] .modern-side-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--default-border);
}

[data-theme="basic"] .modern-side-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .modern-side-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--basic-surface);
    color: var(--modern-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    box-shadow: 0 1px 3px rgba(25, 33, 61, .08);
}

[data-theme="basic"] .modern-side-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--modern-accent);
}

[data-theme="basic"] .modern-side-action {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(244, 63, 94, .14);
    border: 1px solid rgba(244, 63, 94, .35);
    color: var(--basic-foreground);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

[data-theme="basic"] .modern-side-action:hover {
    background: rgba(244, 63, 94, .14);
    color: var(--basic-foreground);
}

[data-theme="basic"] .modern-video {
    position: relative;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
}

[data-theme="basic"] .modern-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

[data-theme="basic"] .modern-breadcrumb > span {
    display: inline-flex;
    align-items: center;
}

[data-theme="basic"] .modern-breadcrumb > span > a {
    color: inherit;
    opacity: .75;
    text-decoration: none;
}

/* ---------- Home: mua nhanh dich vu (qb-*) ---------- */
[data-theme="basic"] .qb-left { padding-right: 24px; }
[data-theme="basic"] .qb-right { border-left: 1px dashed var(--basic-border-strong); padding-left: 24px; }
@media (max-width: 991.98px) {
    [data-theme="basic"] .qb-left { padding-right: calc(var(--bs-gutter-x) * .5); }
    [data-theme="basic"] .qb-right { border-left: 0; padding-left: calc(var(--bs-gutter-x) * .5); }
}

[data-theme="basic"] .qb-step,
[data-theme="basic"] #obj .form-group,
[data-theme="basic"] #input-data .form-group {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--basic-border-strong);
}

[data-theme="basic"] .qb-label,
[data-theme="basic"] .qb-card #obj .form-label,
[data-theme="basic"] .qb-card #input-data .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--basic-muted);
}

[data-theme="basic"] .qb-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* select2 */
[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single {
    min-height: 48px;
    height: auto !important;
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
    background: var(--basic-surface);
    display: flex;
    align-items: center;
    padding: 4px 10px;
}

[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 28px 0 0 !important;
    line-height: 1.4 !important;
    width: 100%;
}

[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 12px;
    top: 0;
}

[data-theme="basic"] .qb-card .select2-container--open .select2-selection--single {
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

[data-theme="basic"] .qb-dropdown.select2-dropdown {
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    overflow: hidden;
    margin-top: 6px;
}

[data-theme="basic"] .qb-dropdown .select2-search--dropdown {
    padding: 10px;
}

[data-theme="basic"] .qb-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--modern-accent);
    border-radius: 10px;
    padding: 9px 12px;
    outline: 0;
}

[data-theme="basic"] .qb-dropdown .select2-results__option {
    padding: 11px 14px;
    border-bottom: 1px solid var(--basic-border-strong);
}

[data-theme="basic"] .qb-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--modern-accent-soft);
    color: inherit;
}

[data-theme="basic"] .qb-dropdown .select2-results__option[aria-selected=true] {
    background: var(--modern-accent-soft);
    box-shadow: inset 3px 0 0 var(--modern-accent);
}

[data-theme="basic"] .qb-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-opt-ico {
    display: inline-flex;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-opt-ico svg {
    width: 18px;
    height: 18px;
}

[data-theme="basic"] .qb-srv {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: normal;
}

[data-theme="basic"] .qb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #22c55e;
}

[data-theme="basic"] .qb-dot.is-beta { background: #f59e0b; }
[data-theme="basic"] .qb-dot.is-slow,
[data-theme="basic"] .qb-dot.is-err { background: #f5365c; }

[data-theme="basic"] .qb-srv-main {
    flex: 1;
    min-width: 0;
}

[data-theme="basic"] .qb-srv-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

[data-theme="basic"] .qb-id {
    font-size: 11px;
    font-weight: 700;
    color: var(--modern-accent);
    background: var(--modern-accent-soft);
    border-radius: 6px;
    padding: 1px 7px;
}

[data-theme="basic"] .qb-srv-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-detail {
    font-size: 11px;
    color: var(--modern-accent);
    cursor: pointer;
    text-decoration: underline;
}

[data-theme="basic"] .qb-srv-desc {
    font-size: 12.5px;
    color: var(--basic-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .qb-srv-min {
    font-size: 11.5px;
    color: var(--basic-muted);
}

[data-theme="basic"] .qb-price {
    margin-left: auto;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

[data-theme="basic"] .qb-price small {
    font-size: 11px;
    font-weight: 600;
    margin-left: 3px;
}

/* input co icon */
[data-theme="basic"] .qb-field {
    position: relative;
}

[data-theme="basic"] .qb-field-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--modern-accent);
    display: inline-flex;
    z-index: 2;
}

[data-theme="basic"] .qb-field-ico svg {
    width: 18px;
    height: 18px;
}

[data-theme="basic"] .qb-card .qb-decorated.form-control {
    height: 48px;
    border-radius: 14px;
    border-color: var(--basic-border-strong);
    background: var(--basic-surface);
}

[data-theme="basic"] .qb-card .qb-decorated.has-ico {
    padding-left: 44px;
}

[data-theme="basic"] .qb-card textarea.qb-decorated.form-control {
    height: auto;
}

[data-theme="basic"] .qb-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--basic-muted);
}

[data-theme="basic"] .qb-hint-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--modern-accent);
}

/* cot phai */
[data-theme="basic"] .qb-info {
    background: var(--modern-accent-soft);
    border-left: 3px solid var(--modern-accent);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-summary {
    border: 1px solid var(--basic-border-strong);
    border-radius: 16px;
    background: var(--basic-surface);
    overflow: hidden;
    margin-bottom: 14px;
}

[data-theme="basic"] .qb-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px dashed var(--basic-border-strong);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-summary-head svg {
    width: 16px;
    height: 16px;
}

[data-theme="basic"] .qb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    font-size: 14px;
    border-bottom: 1px solid #f4f3ff;
}

[data-theme="basic"] .qb-row:last-child {
    border-bottom: 0;
}

[data-theme="basic"] .qb-row > span {
    color: var(--basic-muted);
    flex-shrink: 0;
}

[data-theme="basic"] .qb-row > b {
    color: var(--basic-foreground);
    font-weight: 700;
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

[data-theme="basic"] .qb-clip {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block !important;
}

[data-theme="basic"] .qb-inline-ico {
    display: inline-flex;
}

[data-theme="basic"] .qb-inline-ico svg {
    width: 16px;
    height: 16px;
}

[data-theme="basic"] .qb-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--modern-accent-soft);
    border: 1px solid var(--basic-border-strong);
    font-weight: 800;
    color: var(--basic-foreground);
}

[data-theme="basic"] .qb-total b {
    color: var(--modern-accent);
    font-size: 20px;
}

[data-theme="basic"] .qb-submit {
    border-radius: 14px;
    padding: 14px;
}

[data-theme="basic"] .qb-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--basic-muted);
    line-height: 1.5;
}

[data-theme="basic"] .qb-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}

[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single .select2-selection__arrow,
[data-theme="basic"] .qb-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    background: transparent !important;
    box-shadow: none !important;
}

/* Ẩn wrapper icon khi input đơn bị ẩn (chế độ mua nhiều link) */
[data-theme="basic"] .qb-field:has(> .qb-decorated[style*="display:none"]),
[data-theme="basic"] .qb-field:has(> .qb-decorated[style*="display: none"]) {
    display: none;
}

/* ---------- Profile: thanh tien do thang hang ---------- */
[data-theme="basic"] .profile-rank {
    padding: 14px;
    background: var(--basic-surface);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(37, 83, 185, .08);
}

[data-theme="basic"] .profile-rank-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--basic-border-strong);
    overflow: hidden;
}

[data-theme="basic"] .profile-rank-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--modern-accent);
    min-width: 0;
    transition: width .4s ease;
}

[data-theme="basic"] .profile-rank-text {
    margin-top: .65rem !important;
    line-height: 1.7;
}

[data-theme="basic"] .profile-rank-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    font-size: 12px;
    font-weight: 600;
}

[data-theme="basic"] .profile-rank-badge.is-ok {
    background: rgba(34, 197, 94, .14);
    color: #17c964;
}

/* ---------- Profile: form doi mat khau ---------- */
[data-theme="basic"] .field-icon-wrap.pw-wrap .form-control {
    padding-right: 44px;
}

[data-theme="basic"] .pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--basic-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
}

[data-theme="basic"] .pw-toggle:hover {
    color: var(--modern-accent);
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .pw-toggle i {
    font-size: 18px;
}

[data-theme="basic"] .pw-strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}

[data-theme="basic"] .pw-strength span {
    height: 5px;
    border-radius: 999px;
    background: var(--basic-surface-2);
    transition: background .2s ease;
}

[data-theme="basic"] .pw-strength span.is-weak { background: #f5365c; }
[data-theme="basic"] .pw-strength span.is-fair { background: #f59e0b; }
[data-theme="basic"] .pw-strength span.is-good { background: #3b82f6; }
[data-theme="basic"] .pw-strength span.is-strong { background: #17c964; }

[data-theme="basic"] .pw-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(59, 130, 246, .14);
    border: 1px solid #d5e6ff;
    color: #2563eb;
    font-size: 13px;
    line-height: 1.5;
}

[data-theme="basic"] .pw-note i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---------- Profile: header avatar + ten/so du (mobile: avatar trai, thong tin phai) ---------- */
@media (max-width: 991.98px) {
    [data-theme="basic"] .profile-head {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    [data-theme="basic"] .profile-head .profile-avatar {
        width: 92px;
        height: 92px;
        flex-shrink: 0;
        margin: 0 !important;
    }

    [data-theme="basic"] .profile-head-info {
        flex: 1;
        min-width: 0;
    }

    [data-theme="basic"] .profile-head-info > div:first-child {
        justify-content: flex-start !important;
    }

    [data-theme="basic"] .profile-head-info .profile-username {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    [data-theme="basic"] .profile-head-info .profile-balance-box {
        margin: 8px 0 0 !important;
    }
}

/* ---------- Profile: thanh tab ngang (thay Lien ket nhanh) ---------- */
[data-theme="basic"] .profile-tabbar-wrap {
    background: var(--basic-surface);
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 1px 4px rgba(37, 83, 185, .06);
    overflow-x: auto;
    scrollbar-width: none;
}

[data-theme="basic"] .profile-tabbar-wrap::-webkit-scrollbar {
    display: none;
}

[data-theme="basic"] .profile-tabbar {
    gap: 4px;
    min-width: max-content;
}

[data-theme="basic"] .profile-tabbar a {
    margin-bottom: 0;
    padding: 10px 16px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 14px;
}

[data-theme="basic"] .profile-tabbar a i {
    font-size: 16px;
}

[data-theme="basic"] .profile-tabbar a.active::after {
    display: none;
}

@media (min-width: 992px) {
    [data-theme="basic"] .profile-tabbar {
        min-width: 0;
    }

    [data-theme="basic"] .profile-tabbar a {
        flex: 1 1 0;
        justify-content: center;
    }
}

[data-theme="basic"] .profile-tabbar a {
    padding-left: 12px;
    padding-right: 12px;
}

/* ---------- Home: card san pham (swiper doc) ---------- */
[data-theme="basic"] .home-products-card {
    display: flex;
    flex-direction: column;
}

[data-theme="basic"] .home-products-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 380px;
}

[data-theme="basic"] .homeProductSwiper {
    position: absolute;
    inset: 0;
    padding: 12px 14px;
}

[data-theme="basic"] .homeProductSwiper .swiper-slide {
    height: auto;
}

[data-theme="basic"] .home-prod-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
    background: var(--basic-surface);
    color: var(--basic-foreground);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

[data-theme="basic"] .home-prod-item:hover {
    border-color: var(--modern-accent);
    box-shadow: none;
    transform: translateY(-1px);
    color: var(--basic-foreground);
}

[data-theme="basic"] .home-prod-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(139, 92, 246, .14);
}

[data-theme="basic"] .home-prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[data-theme="basic"] .home-prod-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-theme="basic"] .home-prod-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

[data-theme="basic"] .home-prod-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

[data-theme="basic"] .home-prod-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--modern-accent);
}

[data-theme="basic"] .home-prod-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(244, 63, 94, .14);
    color: #f5365c;
    font-size: 11px;
    font-weight: 600;
}

[data-theme="basic"] .home-products-foot {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 12px 14px;
    border-top: 1px dashed var(--basic-border-strong);
    font-size: 13px;
    font-weight: 600;
}

[data-theme="basic"] .home-products-foot a {
    color: var(--modern-accent);
    text-decoration: none;
}

/* Home: swiper doc cua card san pham — gioi han chieu cao de thay ro cac hang truot */
[data-theme="basic"] .home-products-body {
    min-height: 0;
    flex: 0 0 auto;
}

[data-theme="basic"] .homeProductSwiper {
    position: relative;
    inset: auto;
    height: auto;
    max-height: 460px;
}

/* ---------- Home: 3 box thong ke tren cung (so du / cap bac / tong nap thang) ---------- */
[data-theme="basic"] .home-stat {
    --stat-color: #3b82f6;
    height: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--stat-color) 22%, var(--basic-border-strong));
    background: linear-gradient(135deg, color-mix(in srgb, var(--stat-color) 9%, var(--basic-surface)) 0%, var(--basic-surface) 100%);
}

[data-theme="basic"] .home-stat.is-blue { --stat-color: #3b82f6; }
[data-theme="basic"] .home-stat.is-orange { --stat-color: #f59e0b; }
[data-theme="basic"] .home-stat.is-teal { --stat-color: #14b8a6; }

[data-theme="basic"] .home-stat-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

[data-theme="basic"] .home-stat-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--stat-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="basic"] .home-stat-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--basic-muted);
}

[data-theme="basic"] .home-stat-value {
    margin-top: 12px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--stat-color);
    word-break: break-word;
}

/* ---------- Home: danh sach dich vu (nen tang + tim kiem + danh sach danh so) ---------- */
[data-theme="basic"] .hs-platforms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

[data-theme="basic"] .hs-plat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--basic-surface-2);
    color: var(--basic-foreground);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(25, 33, 61, .06);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

[data-theme="basic"] .hs-plat span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .hs-plat .sb-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--basic-muted);
}

[data-theme="basic"] .hs-plat .sb-icon svg {
    width: 20px;
    height: 20px;
}

[data-theme="basic"] .hs-plat[data-brand*="facebook"] .sb-icon { color: #1877f2; }
[data-theme="basic"] .hs-plat[data-brand*="instagram"] .sb-icon { color: #e1306c; }
[data-theme="basic"] .hs-plat[data-brand*="youtube"] .sb-icon { color: #ff0000; }
[data-theme="basic"] .hs-plat[data-brand*="tiktok"] .sb-icon { color: #111827; }
[data-theme="basic"] .hs-plat[data-brand*="twitter"] .sb-icon { color: #1d9bf0; }
[data-theme="basic"] .hs-plat[data-brand*="shopee"] .sb-icon { color: #ee4d2d; }
[data-theme="basic"] .hs-plat[data-brand*="google"] .sb-icon { color: #34a853; }

[data-theme="basic"] .hs-plat:hover {
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .hs-plat.is-active {
    background: var(--modern-accent-soft);
    border-color: var(--modern-accent);
    color: var(--modern-accent);
}

[data-theme="basic"] .hs-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 16px;
    height: 44px;
    border-radius: 12px;
    background: var(--basic-surface-2);
    color: var(--basic-muted);
    cursor: text;
}

[data-theme="basic"] .hs-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .hs-search:focus-within {
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

[data-theme="basic"] .hs-list {
    display: none;
}

[data-theme="basic"] .hs-list.is-active {
    display: grid;
    gap: 8px;
}

[data-theme="basic"] .hs-card.is-searching .hs-list {
    display: none;
}

[data-theme="basic"] .hs-card.is-searching .hs-list.has-hits {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

[data-theme="basic"] .hs-list-title {
    display: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--modern-accent);
}

[data-theme="basic"] .hs-card.is-searching .hs-list-title {
    display: block;
}

[data-theme="basic"] .hs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--basic-surface-2);
    color: var(--basic-foreground);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

[data-theme="basic"] .hs-item:hover {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    transform: translateX(2px);
}

[data-theme="basic"] .hs-num {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

[data-theme="basic"] .hs-empty {
    padding: 22px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--basic-muted);
}

@media (max-width: 767.98px) {
    [data-theme="basic"] .hs-platforms {
        grid-template-columns: repeat(2, 1fr);
    }
}

[data-theme="basic"] .hs-plat-img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
}

/* ---------- Trang dich vu: hop tong tien + so du ---------- */
[data-theme="basic"] .svc-pay {
    margin-bottom: 14px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 16px;
    background: var(--basic-surface);
    overflow: hidden;
}

[data-theme="basic"] .svc-pay-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .svc-pay-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--basic-foreground);
}

[data-theme="basic"] .svc-pay-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--basic-surface);
    color: var(--modern-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(25, 33, 61, .08);
}

[data-theme="basic"] .svc-pay-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}

[data-theme="basic"] .svc-pay-amount #payment {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--modern-accent);
}

[data-theme="basic"] .svc-pay-amount #discount {
    font-size: 13px;
    font-weight: 600;
    color: var(--basic-muted);
}

[data-theme="basic"] .svc-pay-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px dashed var(--basic-border-strong);
    font-size: 14px;
}

[data-theme="basic"] .svc-pay-balance .svc-pay-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--basic-muted);
}

[data-theme="basic"] .svc-pay-balance b {
    font-weight: 700;
    color: #16a34a;
}

[data-theme="basic"] .svc-pay-balance.is-guest {
    justify-content: center;
    background: rgba(245, 158, 11, .14);
}

[data-theme="basic"] .svc-pay-balance.is-guest .svc-pay-label {
    color: #d97706;
}

/* ---------- Trang dich vu: box mo ta server ---------- */
[data-theme="basic"] .svc-detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--basic-border-strong);
    border-left: 3px solid var(--modern-accent);
    border-radius: 12px;
    background: var(--modern-accent-soft);
    color: var(--basic-foreground);
    font-size: 13.5px;
    line-height: 1.65;
}

[data-theme="basic"] .svc-detail-ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--basic-surface);
    color: var(--modern-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(25, 33, 61, .08);
}

[data-theme="basic"] .svc-detail-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-theme="basic"] .svc-detail-body > :last-child {
    margin-bottom: 0;
}

[data-theme="basic"] .svc-detail-body p {
    margin-bottom: 6px;
}

[data-theme="basic"] .svc-detail-body ul,
[data-theme="basic"] .svc-detail-body ol {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* ---------- Trang dich vu: danh sach server — mau xanh/duong chuyen sang primary ---------- */
[data-theme="basic"] .server-item:has(.form-check-input:checked[type=radio]) {
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .form-servers .form-check-input:checked {
    background-color: var(--modern-accent);
    border-color: var(--modern-accent);
}

[data-theme="basic"] .form-servers .form-check-input:focus {
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

[data-theme="basic"] .form-servers .badge.view-detail.bg-info {
    background-color: var(--modern-accent-soft) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .form-servers .badge.bg-success {
    background-color: var(--modern-accent-soft) !important;
    color: var(--modern-accent) !important;
}

/* ---------- SweetAlert2 (theme modern) ---------- */
[data-theme="basic"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
[data-theme="basic"] body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation {
    background: rgba(24, 20, 56, .46) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

[data-theme="basic"] .swal2-popup {
    width: 100%;
    max-width: 440px;
    padding: 30px 26px 24px;
    border-radius: 22px;
    background: var(--basic-surface);
    color: var(--basic-foreground);
    font-family: inherit;
    box-shadow: 0 24px 60px rgba(31, 24, 90, .28);
}

[data-theme="basic"] .swal2-popup.swal2-toast {
    width: auto;
    max-width: 380px;
    padding: 10px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(31, 24, 90, .18);
}

/* Icon */
[data-theme="basic"] .swal2-icon {
    margin: 4px auto 18px;
    border-width: 3px;
}

[data-theme="basic"] .swal2-icon .swal2-icon-content {
    font-size: 2.6rem;
}

[data-theme="basic"] .swal2-icon.swal2-warning {
    border-color: rgba(245, 158, 11, .35);
    color: #f59e0b;
}

[data-theme="basic"] .swal2-icon.swal2-question {
    border-color: var(--basic-border-strong);
    color: var(--modern-accent);
}

[data-theme="basic"] .swal2-icon.swal2-info {
    border-color: rgba(59, 130, 246, .35);
    color: #3b82f6;
}

[data-theme="basic"] .swal2-icon.swal2-error {
    border-color: rgba(244, 63, 94, .35);
    color: #f5365c;
}

[data-theme="basic"] .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #f5365c;
}

[data-theme="basic"] .swal2-icon.swal2-success {
    border-color: rgba(34, 197, 94, .35);
    color: #17c964;
}

[data-theme="basic"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(34, 197, 94, .35);
}

[data-theme="basic"] .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #17c964;
}

/* Title / content */
[data-theme="basic"] .swal2-title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--basic-foreground);
}

[data-theme="basic"] .swal2-html-container {
    margin: 10px 0 0;
    padding: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--basic-muted);
}

[data-theme="basic"] .swal2-html-container a {
    color: var(--modern-accent);
    text-decoration: none;
    font-weight: 600;
}

[data-theme="basic"] .swal2-html-container a:hover {
    text-decoration: underline;
}

/* Buttons */
[data-theme="basic"] .swal2-actions {
    gap: 10px;
    margin: 24px 0 0;
    width: 100%;
}

[data-theme="basic"] .swal2-styled {
    margin: 0;
    padding: 11px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transition: filter .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}

[data-theme="basic"] .swal2-styled:active {
    transform: translateY(1px);
}

[data-theme="basic"] .swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--modern-accent-soft) !important;
}

[data-theme="basic"] .swal2-styled.swal2-confirm {
    background: var(--modern-accent) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none;
}

[data-theme="basic"] .swal2-styled.swal2-confirm:hover {
    filter: brightness(1.06);
}

/* Confirm nguy hiem (xoa/huy): giu mau do neu trang truyen confirmButtonColor do */
[data-theme="basic"] .swal2-styled.swal2-confirm[style*="#dc3545;" i],
[data-theme="basic"] .swal2-styled.swal2-confirm[style*="#d33;" i],
[data-theme="basic"] .swal2-styled.swal2-confirm[style*="#f5365c;" i] {
    background: linear-gradient(135deg, #ff5b7f 0%, #f5365c 100%) !important;
    box-shadow: 0 6px 16px rgba(245, 54, 92, .3);
}

[data-theme="basic"] .swal2-styled.swal2-cancel {
    background: var(--basic-surface) !important;
    color: var(--basic-foreground) !important;
    border: 1px solid var(--basic-border-strong) !important;
}

[data-theme="basic"] .swal2-styled.swal2-cancel:hover {
    background: var(--modern-accent-soft) !important;
    border-color: var(--modern-accent) !important;
    color: var(--modern-accent) !important;
}

[data-theme="basic"] .swal2-styled.swal2-deny {
    background: rgba(244, 63, 94, .14) !important;
    color: #f5365c !important;
    border: 1px solid rgba(244, 63, 94, .35) !important;
}

[data-theme="basic"] .swal2-styled.swal2-deny:hover {
    background: rgba(244, 63, 94, .14) !important;
}

/* Inputs */
[data-theme="basic"] .swal2-input,
[data-theme="basic"] .swal2-textarea,
[data-theme="basic"] .swal2-select,
[data-theme="basic"] .swal2-file {
    width: 100%;
    margin: 16px 0 0;
    padding: 0 14px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 12px;
    background: var(--basic-surface);
    color: var(--basic-foreground);
    font-size: 14px;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[data-theme="basic"] .swal2-input,
[data-theme="basic"] .swal2-select {
    height: 46px;
}

[data-theme="basic"] .swal2-textarea {
    min-height: 100px;
    padding: 12px 14px;
    resize: vertical;
}

[data-theme="basic"] .swal2-file {
    padding: 10px 14px;
    height: auto;
}

[data-theme="basic"] .swal2-input::placeholder,
[data-theme="basic"] .swal2-textarea::placeholder {
    color: var(--basic-muted);
}

[data-theme="basic"] .swal2-input:focus,
[data-theme="basic"] .swal2-textarea:focus,
[data-theme="basic"] .swal2-select:focus,
[data-theme="basic"] .swal2-file:focus {
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
    outline: 0;
}

[data-theme="basic"] .swal2-input-label {
    justify-content: flex-start;
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--basic-foreground);
}

[data-theme="basic"] .swal2-radio,
[data-theme="basic"] .swal2-checkbox {
    margin: 16px 0 0;
    background: transparent;
    color: var(--basic-foreground);
    font-size: 14px;
    accent-color: var(--modern-accent);
}

[data-theme="basic"] .swal2-radio input,
[data-theme="basic"] .swal2-checkbox input {
    accent-color: var(--modern-accent);
}

[data-theme="basic"] .swal2-validation-message {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(244, 63, 94, .14);
    color: #e11d48;
    font-size: 13px;
    font-weight: 600;
}

[data-theme="basic"] .swal2-validation-message::before {
    background-color: #f5365c;
}

/* Close / footer / progress */
[data-theme="basic"] .swal2-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--basic-muted);
    font-size: 26px;
}

[data-theme="basic"] .swal2-close:hover {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
}

[data-theme="basic"] .swal2-close:focus {
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

[data-theme="basic"] .swal2-footer {
    margin-top: 20px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--basic-border-strong);
    color: var(--basic-muted);
    font-size: 13px;
}

[data-theme="basic"] .swal2-timer-progress-bar {
    background: var(--modern-accent);
}

[data-theme="basic"] .swal2-loader {
    border-color: var(--modern-accent) transparent var(--modern-accent) transparent;
}

[data-theme="basic"] .swal2-progress-steps .swal2-progress-step,
[data-theme="basic"] .swal2-progress-steps .swal2-progress-step-line {
    background: var(--modern-accent);
}

[data-theme="basic"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: var(--modern-accent);
}

[data-theme="basic"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step,
[data-theme="basic"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: var(--basic-border-strong);
}

/* Toast */
[data-theme="basic"] .swal2-toast .swal2-title {
    margin: 0 8px;
    font-size: 14px;
    font-weight: 600;
}

[data-theme="basic"] .swal2-toast .swal2-icon {
    margin: 0 4px 0 0;
    border-width: 2px;
}

[data-theme="basic"] .swal2-toast .swal2-icon .swal2-icon-content {
    font-size: 1.2rem;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .swal2-popup {
        padding: 26px 18px 20px;
    }
}

[data-theme="basic"] .swal2-container.swal2-top-end.swal2-backdrop-show,
[data-theme="basic"] .swal2-container.swal2-top-start.swal2-backdrop-show,
[data-theme="basic"] .swal2-container.swal2-bottom-end.swal2-backdrop-show,
[data-theme="basic"] .swal2-container.swal2-bottom-start.swal2-backdrop-show {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---------- Footer full width nhu topbar ---------- */
[data-theme="basic"] .footer {
    padding: 0 !important;
}

[data-theme="basic"] .footer .card {
    border-radius: 0 !important;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

[data-theme="basic"] .footer .card-body {
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Box chat: doi mau xanh duong sang primary ---------- */
[data-theme="basic"] .ai-msg-user .msg-content {
    background: var(--modern-accent);
    box-shadow: none;
}

[data-theme="basic"] .ai-msg-bot .avatar {
    background: var(--modern-accent);
}

[data-theme="basic"] .chat-tab-btn.active {
    color: var(--modern-accent);
    border-bottom-color: var(--modern-accent);
}

/* ---------- Trang policy / dieu khoan ---------- */
/* Breadcrumb da len header, bo breadcrumb trong hero */
[data-theme="basic"] .row:has(> .legal-content-col) nav[aria-label="breadcrumb"] {
    display: none;
}

[data-theme="basic"] .row:has(> .legal-content-col) > .col-12:first-child > .card {
    margin-bottom: 20px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 18px;
    background: var(--basic-neutral-bg) !important;
}

[data-theme="basic"] .row:has(> .legal-content-col) > .col-12:first-child > .card > .card-body {
    padding: 24px 28px !important;
}

[data-theme="basic"] .row:has(> .legal-content-col) > .col-12:first-child h1 {
    font-size: 26px !important;
    font-weight: 800;
    color: var(--basic-foreground);
}

[data-theme="basic"] .row:has(> .legal-content-col) > .col-12:first-child .badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--basic-surface) !important;
    color: var(--modern-accent) !important;
    border: 1px solid var(--basic-border-strong) !important;
    font-weight: 600;
}

[data-theme="basic"] .row:has(> .legal-content-col) > .col-12:first-child p {
    max-width: 900px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--basic-muted) !important;
}

/* Menu ben trai */
[data-theme="basic"] .legal-nav-card {
    border-radius: 18px;
    border: 1px solid var(--basic-border-strong);
}

[data-theme="basic"] .legal-nav-label {
    margin: 4px 6px 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--basic-muted);
}

[data-theme="basic"] .legal-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--basic-foreground);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

[data-theme="basic"] .legal-nav-item:hover {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
}

[data-theme="basic"] .legal-nav-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--basic-surface-2);
    color: var(--basic-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

[data-theme="basic"] .legal-nav-text {
    flex: 1;
    min-width: 0;
}

[data-theme="basic"] .legal-nav-num {
    font-size: 11px;
    color: var(--basic-muted);
}

[data-theme="basic"] .legal-nav-item.is-active {
    background: var(--modern-accent-soft);
    color: var(--modern-accent);
    font-weight: 700;
}

[data-theme="basic"] .legal-nav-item.is-active .legal-nav-ico {
    background: var(--modern-accent);
    color: #fff;
}

[data-theme="basic"] .legal-nav-item.is-active .legal-nav-num {
    color: var(--modern-accent);
}

/* Khung noi dung */
[data-theme="basic"] .legal-content-col > .card,
[data-theme="basic"] .legal-toc-col > .card {
    border: 1px solid var(--basic-border-strong);
    border-radius: 18px;
}

[data-theme="basic"] .legal-content-col > .card > .card-body {
    padding: 28px 32px;
}

[data-theme="basic"] .legal-content-col .card-body > .d-flex.border-bottom:first-child {
    border-bottom: 1px dashed var(--basic-border-strong) !important;
    padding-bottom: 16px !important;
    margin-bottom: 22px !important;
}

[data-theme="basic"] .legal-content-col .card-body > .d-flex.border-bottom:first-child > div:first-child {
    background: var(--modern-accent-soft) !important;
    border-radius: 12px !important;
}

[data-theme="basic"] .legal-content-col .card-body > .d-flex.border-bottom:first-child > div:first-child i {
    color: var(--modern-accent) !important;
}

/* Chu trong noi dung */
[data-theme="basic"] .legal-content-col h3.fs-5 {
    margin: 28px 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--modern-accent);
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.4;
    color: var(--basic-foreground);
    scroll-margin-top: 90px;
}

[data-theme="basic"] .legal-content-col h4.fs-6 {
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-content-col p:not(.fs-11),
[data-theme="basic"] .legal-content-col li {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-content-col li {
    margin-bottom: 4px;
}

[data-theme="basic"] .legal-content-col strong {
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-content-col a {
    color: var(--modern-accent);
}

/* Van ban dieu khoan (term-doc) */
[data-theme="basic"] .legal-content-col .term-doc h2 {
    margin-top: 40px;
    padding: 0 0 8px 12px;
    border: 0;
    border-left: 3px solid var(--modern-accent);
    border-bottom: 1px dashed var(--basic-border-strong);
    font-size: 19px;
    font-weight: 800;
    color: var(--basic-foreground);
    scroll-margin-top: 90px;
}

[data-theme="basic"] .legal-content-col .term-doc h2.text-center {
    margin-top: 0;
    padding: 0;
    border: 0;
    font-size: 20px;
    color: var(--modern-accent);
}

[data-theme="basic"] .legal-content-col .term-doc h3 {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--basic-foreground);
    scroll-margin-top: 90px;
}

[data-theme="basic"] .legal-content-col .term-doc .meta,
[data-theme="basic"] .legal-content-col .term-doc .terms-note {
    color: var(--basic-muted);
}

[data-theme="basic"] .legal-content-col .term-doc .warning {
    margin: 16px 0;
    padding: 14px 18px;
    border: 1px solid rgba(244, 63, 94, .35);
    border-left: 4px solid #f5365c;
    border-radius: 12px;
    background: rgba(244, 63, 94, .14);
    color: #e11d48;
}

[data-theme="basic"] .legal-content-col .term-doc .info {
    margin: 16px 0;
    padding: 14px 18px;
    border: 1px solid var(--basic-border-strong);
    border-left: 4px solid var(--modern-accent);
    border-radius: 12px;
    background: var(--modern-accent-soft);
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-content-col .term-doc .note {
    color: #e11d48;
}

[data-theme="basic"] .legal-content-col .term-doc table.legal {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--basic-border-strong);
    border-radius: 12px;
    overflow: hidden;
}

[data-theme="basic"] .legal-content-col .term-doc table.legal th,
[data-theme="basic"] .legal-content-col .term-doc table.legal td {
    border: 0;
    border-bottom: 1px solid var(--basic-border-strong);
    padding: 10px 14px;
}

[data-theme="basic"] .legal-content-col .term-doc table.legal th {
    background: var(--modern-accent-soft);
    color: var(--basic-foreground);
    font-weight: 700;
}

[data-theme="basic"] .legal-content-col .term-doc table.legal tr:last-child td {
    border-bottom: 0;
}

/* Muc luc ben phai */
[data-theme="basic"] .legal-toc-col .card-body > p {
    margin: 4px 6px 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--basic-muted) !important;
}

[data-theme="basic"] .legal-toc-item {
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-toc-item:hover {
    color: var(--modern-accent);
    background: var(--modern-accent-soft);
}

[data-theme="basic"] .legal-toc-item.is-active {
    color: var(--modern-accent);
    background: var(--modern-accent-soft);
    font-weight: 700;
}

/* Khoi lien he cuoi trang */
[data-theme="basic"] .legal-cta {
    margin-top: 32px;
    padding: 20px 22px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 16px;
    background: var(--basic-neutral-bg);
}

[data-theme="basic"] .legal-cta-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

[data-theme="basic"] .legal-cta-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--basic-surface);
    color: var(--modern-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(25, 33, 61, .08);
}

[data-theme="basic"] .legal-cta-head strong {
    display: block;
    font-size: 15px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .legal-cta-head p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--basic-muted);
}

[data-theme="basic"] .legal-cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[data-theme="basic"] .legal-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--btn-color, var(--modern-accent));
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease, transform .1s ease;
}

[data-theme="basic"] .legal-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    [data-theme="basic"] .legal-content-col > .card > .card-body {
        padding: 20px 18px;
    }

    [data-theme="basic"] .legal-nav-card {
        position: static !important;
    }
}

[data-theme="basic"] .legal-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[data-theme="basic"] .legal-toc-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

[data-theme="basic"] .legal-toc-item .toc-num {
    min-width: 22px;
    flex-shrink: 0;
}

[data-theme="basic"] .legal-toc-item .toc-label {
    flex: 1;
}

/* ---------- /product/all: luoi box ngang ---------- */
[data-theme="basic"] .pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

[data-theme="basic"] .pl-grid .product-item {
    min-width: 0;
}

[data-theme="basic"] .pl-grid .home-prod-item {
    height: 100%;
}

[data-theme="basic"] .pl-grid .home-prod-thumb {
    width: 64px;
    height: 64px;
}

[data-theme="basic"] .pl-empty {
    grid-column: 1 / -1;
    padding: 28px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--basic-muted);
}

[data-theme="basic"] .pl-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--basic-surface-2);
    color: var(--basic-muted);
    cursor: text;
}

[data-theme="basic"] .pl-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .pl-search:focus-within {
    box-shadow: 0 0 0 3px var(--modern-accent-soft);
}

/* ---------- Chi tiet san pham ---------- */
[data-theme="basic"] .pd-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

[data-theme="basic"] .pd-head-img {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 20px;
    object-fit: cover;
    background: var(--basic-surface);
    box-shadow: 0 6px 18px rgba(31, 24, 90, .12);
}

[data-theme="basic"] .pd-head-info {
    min-width: 0;
}

[data-theme="basic"] .pd-head-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--basic-foreground);
}

[data-theme="basic"] .pd-head-stars {
    display: flex;
    gap: 2px;
    color: #f5b301;
}

[data-theme="basic"] .list-input-radio {
    gap: 12px;
}

[data-theme="basic"] .list-input-radio label {
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--basic-border-strong);
    border-radius: var(--basic-radius-lg);
    background: var(--basic-surface);
    color: var(--basic-foreground);
}

[data-theme="basic"] .list-input-radio label:hover {
    border-color: var(--modern-accent);
    box-shadow: none;
}

[data-theme="basic"] .list-input-radio label img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
}

[data-theme="basic"] .list-input-radio label > div {
    padding: 0 !important;
}

[data-theme="basic"] .list-input-radio input[type="radio"]:checked + label {
    border-color: var(--modern-accent);
    background: var(--modern-accent-soft);
    color: var(--basic-foreground);
    box-shadow: 0 0 0 1px var(--modern-accent);
}

[data-theme="basic"] .list-input-radio input[type="radio"]:checked + label::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 34px 34px 0;
    border-color: transparent var(--modern-accent) transparent transparent;
}

[data-theme="basic"] .list-input-radio input[type="radio"]:checked + label::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m5 12.5 4.5 4.5L19 7%27/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-theme="basic"] .list-input-radio .name-prod {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}

[data-theme="basic"] .pd-stock {
    color: #16a34a;
}

[data-theme="basic"] .pd-price {
    color: var(--modern-accent);
}

[data-theme="basic"] .pd-selected {
    border: 1px solid var(--modern-accent);
    background: var(--modern-accent-soft);
    color: var(--basic-foreground);
}

[data-theme="basic"] .pd-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--basic-border-strong);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--basic-foreground);
}

[data-theme="basic"] .pd-card-title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--modern-accent);
}

[data-theme="basic"] .card-buy .card-body {
    padding: 20px;
}

[data-theme="basic"] .card-buy .btn-primary.qb-submit {
    margin-top: 6px;
}

[data-theme="basic"] .card-buy #price,
[data-theme="basic"] .card-buy #rate {
    font-size: 15px;
}

[data-theme="basic"] .card-buy #price {
    color: var(--modern-accent) !important;
    font-size: 20px;
    font-weight: 800;
}

[data-theme="basic"] .contact-box {
    max-width: none;
    padding: 0;
    border: 1px solid var(--basic-border-strong);
    border-radius: 18px;
    background: var(--basic-neutral-bg);
    box-shadow: none;
}

[data-theme="basic"] .contact-box:hover {
    transform: none;
    box-shadow: none;
}

[data-theme="basic"] .contact-inner {
    background: transparent;
}

[data-theme="basic"] .contact-content {
    padding: 18px;
}

[data-theme="basic"] .contact-title {
    color: var(--basic-foreground);
}

[data-theme="basic"] .contact-text {
    color: var(--basic-muted);
}

[data-theme="basic"] .highlight {
    color: var(--modern-accent);
}

[data-theme="basic"] .contact-btn {
    padding: 9px 18px;
    border-radius: var(--basic-radius-lg);
    background: var(--modern-accent);
    box-shadow: none;
}

[data-theme="basic"] .alert-primary.custom-alert-icon {
    border-inline-start-color: var(--modern-accent) !important;
    border-radius: 12px;
}

[data-theme="basic"] .alert-warning.custom-alert-icon {
    border-radius: 12px;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .pd-head-img {
        width: 76px;
        height: 76px;
        border-radius: 16px;
    }

    [data-theme="basic"] .pd-head-title {
        font-size: 19px;
    }
}

/* ---------- Thanh cuộn mảnh, tự ẩn (evondevKit tokens.css, locked-rules #13) =====
   Đứng yên thì trong suốt (vẫn giữ 4px chỗ để nội dung không bị đẩy ngang lúc
   hiện ra), rê chuột vào vùng cuộn thì hiện mờ. Scope riêng theme "basic", không
   đụng theme khác. */
[data-theme="basic"] * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
[data-theme="basic"] *:hover {
    scrollbar-color: color-mix(in srgb, var(--basic-foreground) 22%, transparent) transparent;
}
[data-theme="basic"] ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
[data-theme="basic"] ::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme="basic"] ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--basic-radius-full);
}
[data-theme="basic"] *:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--basic-foreground) 22%, transparent);
}
[data-theme="basic"] ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--basic-foreground) 40%, transparent);
}

/* ---------- Lớp nổi (dropdown/menu/toast): bóng popover theo thang bóng của skill ---------- */
[data-theme="basic"] .dropdown-menu,
[data-theme="basic"] .select2-dropdown,
[data-theme="basic"] .qb-dropdown.select2-dropdown {
    box-shadow: var(--basic-shadow-popover);
    border-color: var(--basic-border-strong);
}

[data-theme="basic"] .modal-content {
    box-shadow: var(--basic-shadow-modal);
    border-radius: var(--basic-radius-lg);
}

/* ============================================================
   Trang dich vu (theme basic): bo cuc toi 2 cot — form dat mua ben trai (+ hop huong dan ngay
   duoi), ben phai la tieu de/mo ta/tag + stat-card + "Hoat dong gan day". Mau nhan lay theo
   platform qua --svc-acc / --svc-acc2 dat inline tren .svc-page.
   ============================================================ */
[data-theme="basic"] .page-content:has(.svc-page) {
    background:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 32px 32px,
        #0b0f17;
}

[data-theme="basic"] .svc-page {
    --svc-bg: #0f1520;
    --svc-surface: #161e2b;
    --svc-surface-2: #1c2636;
    --svc-border: rgba(255, 255, 255, .08);
    --svc-text: #eef2f7;
    --svc-muted: #8b97a8;
    --svc-acc: #ec4899;
    --svc-acc2: #22d3ee;
    --svc-dark-bg: var(--svc-bg);
    --svc-dark-surface: var(--svc-surface);
    --svc-dark-surface-2: var(--svc-surface-2);
    --svc-dark-border: var(--svc-border);
    --svc-dark-text: var(--svc-text);
    --svc-dark-muted: var(--svc-muted);
    --svc-dark-accent: var(--svc-acc);
    padding-top: 8px;
}

[data-theme="basic"] .svc-page .card {
    background: var(--svc-bg);
    border: 1px solid var(--svc-border);
    color: var(--svc-text);
    box-shadow: none;
}

[data-theme="basic"] .svc-page .svc-buy-dark,
[data-theme="basic"] .svc-page .svc-trust-card {
    border-color: color-mix(in srgb, var(--svc-acc) 28%, var(--svc-border));
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 20px 50px -20px color-mix(in srgb, var(--svc-acc) 35%, transparent);
}

[data-theme="basic"] .svc-page .card .card-body {
    color: var(--svc-text);
}


[data-theme="basic"] .svc-page .modern-side-head {
    border-bottom-color: var(--svc-border);
}

[data-theme="basic"] .svc-page .modern-side-title,
[data-theme="basic"] .svc-page .body-note,
[data-theme="basic"] .svc-page .body-note * {
    color: var(--svc-text);
}

/* ---------- Form: header ---------- */
[data-theme="basic"] .svc-buy-dark .svc-buy-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-head-ico {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--svc-acc), var(--svc-acc2));
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-head-ico svg {
    width: 22px;
    height: 22px;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-head-title {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-head-sub {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--svc-muted);
}

/* ---------- Form: tab Mua / Lich su ---------- */
[data-theme="basic"] .svc-buy-dark .modern-tab-selector-tabs {
    border-bottom-color: var(--svc-border);
}

[data-theme="basic"] .svc-buy-dark .modern-tab-selector-tabs .nav-link {
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .modern-tab-selector-tabs .nav-link.active {
    color: #fff;
    border-color: var(--svc-acc);
}

/* ---------- Form: dai buoc 1-4 (chip + duong noi) ---------- */
[data-theme="basic"] .svc-buy-dark .svc-buy-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
}

[data-theme="basic"] .svc-buy-dark .svc-step-line {
    flex: 1 1 12px;
    min-width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, .12);
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--svc-muted);
    white-space: nowrap;
    transition: background-color .2s ease;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #0b0f17;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step i svg {
    display: none;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-active {
    padding-right: 14px;
    background: color-mix(in srgb, var(--svc-acc) 16%, transparent);
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-active i {
    background: var(--svc-acc);
    border-color: var(--svc-acc);
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-done {
    color: var(--svc-text);
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-done i {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-done i b {
    display: none;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-done i svg {
    display: block;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-step.is-done + .svc-step-line {
    background: color-mix(in srgb, #22c55e 55%, transparent);
}

/* ---------- Form: nhan + o nhap ---------- */
[data-theme="basic"] .svc-buy-dark .form-label,
[data-theme="basic"] .svc-buy-dark label,
[data-theme="basic"] .svc-buy-dark strong {
    color: var(--svc-text);
}

[data-theme="basic"] .svc-buy-dark .svc-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .svc-lbl svg {
    flex-shrink: 0;
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-buy-dark small,
[data-theme="basic"] .svc-buy-dark .text-muted {
    color: var(--svc-muted) !important;
}

[data-theme="basic"] .svc-buy-dark .form-control,
[data-theme="basic"] .svc-buy-dark .form-select,
[data-theme="basic"] .svc-buy-dark .input-group-text {
    min-height: 46px;
    background-color: var(--svc-surface);
    border-color: var(--svc-border);
    border-radius: 10px;
    color: var(--svc-text);
}

[data-theme="basic"] .svc-buy-dark textarea.form-control {
    min-height: 0;
}

[data-theme="basic"] .svc-buy-dark #obj .form-group,
[data-theme="basic"] .svc-buy-dark #input-data .form-group {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
}

[data-theme="basic"] .svc-buy-dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c7d0dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="basic"] .svc-buy-dark .form-select option {
    background: var(--svc-surface);
    color: var(--svc-text);
}

[data-theme="basic"] .svc-buy-dark .form-control::placeholder {
    color: #5f6b7c;
}

[data-theme="basic"] .svc-buy-dark .form-control:focus,
[data-theme="basic"] .svc-buy-dark .form-select:focus {
    background-color: var(--svc-surface);
    border-color: var(--svc-acc);
    color: var(--svc-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--svc-acc) 20%, transparent);
}

[data-theme="basic"] .svc-buy-dark .form-check-input {
    background-color: var(--svc-surface);
    border-color: rgba(255, 255, 255, .2);
}

[data-theme="basic"] .svc-buy-dark .form-check-input:checked {
    background-color: var(--svc-acc);
    border-color: var(--svc-acc);
}

[data-theme="basic"] .svc-buy-dark .form-check-label {
    color: var(--svc-muted);
    font-size: 13px;
}

[data-theme="basic"] .svc-buy-dark .text-primary {
    color: var(--svc-acc2) !important;
}

/* o so luong co don vi dinh ben phai */
[data-theme="basic"] .svc-buy-dark .svc-range {
    margin: -6px 0 10px;
    font-size: 11.5px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-input-unit .form-control {
    border-right: 0;
    border-radius: 10px 0 0 10px;
}

[data-theme="basic"] .svc-buy-dark .svc-input-unit .input-group-text {
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--svc-acc) 12%, var(--svc-surface));
    color: var(--svc-acc2);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Form: Quoc gia + Server (dropdown dong/mo) ---------- */
[data-theme="basic"] .svc-buy-dark .svc-sel-row {
    position: relative;
}

[data-theme="basic"] .svc-buy-dark .svc-server-picker {
    position: static;
}

[data-theme="basic"] .svc-buy-dark .svc-server-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--svc-border);
    background: var(--svc-surface);
    color: var(--svc-text);
    font-size: 14px;
    text-align: left;
}

[data-theme="basic"] .svc-buy-dark .svc-server-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .svc-buy-dark .svc-server-trigger svg {
    flex-shrink: 0;
    color: #c7d0dc;
    transition: transform .15s ease;
}

[data-theme="basic"] .svc-buy-dark .svc-sel-row.is-open .svc-server-trigger {
    border-color: var(--svc-acc);
}

[data-theme="basic"] .svc-buy-dark .svc-sel-row.is-open .svc-server-trigger svg {
    transform: rotate(180deg);
}

[data-theme="basic"] .svc-buy-dark .form-servers#svcServerDropdown {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px !important;
    background: var(--svc-surface-2);
    border: 1px solid var(--svc-border);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

[data-theme="basic"] .svc-buy-dark .svc-sel-row.is-open .form-servers#svcServerDropdown {
    display: block;
}

[data-theme="basic"] .svc-buy-dark .server-item {
    border-radius: 8px;
}

[data-theme="basic"] .svc-buy-dark .server-item .border-bottom {
    border-color: var(--svc-border) !important;
}

[data-theme="basic"] .svc-buy-dark .server-item:hover {
    background: rgba(255, 255, 255, .04);
}

[data-theme="basic"] .svc-buy-dark .server-item:has(.form-check-input:checked[type=radio]) {
    background: color-mix(in srgb, var(--svc-acc) 16%, transparent);
}

[data-theme="basic"] .svc-buy-dark .form-servers .badge.view-detail.bg-info,
[data-theme="basic"] .svc-buy-dark .form-servers .badge.bg-success {
    background-color: color-mix(in srgb, var(--svc-acc) 18%, transparent) !important;
    color: var(--svc-acc2) !important;
}

/* ---------- Form: mo ta server ---------- */
[data-theme="basic"] .svc-buy-dark .svc-detail {
    display: block;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--svc-acc) 5%, var(--svc-bg));
    border: 1px solid color-mix(in srgb, var(--svc-acc2) 30%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #c9d2de;
}

[data-theme="basic"] .svc-buy-dark .svc-detail-ico {
    display: none;
}

[data-theme="basic"] .svc-buy-dark .svc-detail-body,
[data-theme="basic"] .svc-buy-dark .svc-detail-body * {
    color: #c9d2de;
}

[data-theme="basic"] .svc-buy-dark #details > .mb-3 {
    margin-bottom: 12px !important;
}

/* ---------- Form: tuy chon nang cao (hen gio / lap don) ---------- */
[data-theme="basic"] .svc-buy-dark .svc-adv {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--svc-border);
    border-radius: 10px;
}

[data-theme="basic"] .svc-buy-dark .svc-adv summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-adv[open] summary {
    margin-bottom: 8px;
}

/* ---------- Form: dong gia / tam tinh ---------- */
[data-theme="basic"] .svc-buy-dark .svc-sum {
    margin-bottom: 16px;
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    font-size: 13px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row b {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row.is-total b {
    font-size: 20px;
    font-weight: 800;
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row.is-total strike {
    font-size: 12px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row.is-muted {
    font-size: 12px;
    padding-top: 2px;
}

[data-theme="basic"] .svc-buy-dark .svc-sum-row.is-muted span:last-child {
    color: #34d399;
    font-weight: 600;
}

/* ---------- Form: nut dat + dong tin tuong ---------- */
[data-theme="basic"] .svc-buy-dark .btn-primary.qb-submit {
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--svc-acc), var(--svc-acc2));
    color: #fff;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--svc-acc) 60%, transparent);
}

[data-theme="basic"] .svc-buy-dark .btn-primary.qb-submit:hover {
    filter: brightness(1.08);
}

[data-theme="basic"] .svc-buy-dark .btn-primary.qb-submit:disabled {
    opacity: .5;
    box-shadow: none;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .svc-buy-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

[data-theme="basic"] .svc-buy-dark .svc-buy-trust svg {
    color: var(--svc-acc2);
}

/* ---------- Form: tab lich su don ---------- */
[data-theme="basic"] .svc-buy-dark .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--svc-text);
    color: var(--svc-text);
}

[data-theme="basic"] .svc-buy-dark .table-bordered,
[data-theme="basic"] .svc-buy-dark .table-bordered td,
[data-theme="basic"] .svc-buy-dark .table-bordered th {
    border-color: var(--svc-border);
}

[data-theme="basic"] .svc-buy-dark .table thead th {
    background: var(--svc-surface);
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .nav.bordered-tab {
    border-color: var(--svc-border) !important;
}

[data-theme="basic"] .svc-buy-dark .nav-pills .nav-link {
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-buy-dark .nav-pills .nav-link.active {
    background: var(--svc-acc);
    color: #fff;
}

/* ---------- Hop huong dan ngay duoi form ---------- */
[data-theme="basic"] .svc-guide-box {
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--svc-bg);
    border: 1px solid var(--svc-border);
    border-left: 3px solid var(--svc-acc2);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.65;
}

[data-theme="basic"] .svc-guide-box,
[data-theme="basic"] .svc-guide-box * {
    color: #c9d2de;
}

[data-theme="basic"] .svc-guide-box strong,
[data-theme="basic"] .svc-guide-box b {
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-guide-box a {
    color: var(--svc-acc2);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
}

[data-theme="basic"] .svc-guide-box hr {
    border-color: var(--svc-border);
    opacity: 1;
}

[data-theme="basic"] .svc-guide-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ---------- Cot phai: tieu de + mo ta + tag ---------- */
[data-theme="basic"] .svc-trust-card .card-body {
    padding: 22px;
}

[data-theme="basic"] .svc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--svc-acc2) 45%, transparent);
    background: color-mix(in srgb, var(--svc-acc2) 10%, transparent);
    color: var(--svc-acc2);
    font-size: 12.5px;
    font-weight: 600;
}

[data-theme="basic"] .svc-hero-pill svg {
    width: 14px;
    height: 14px;
}

[data-theme="basic"] .svc-hero-title {
    margin: 14px 0 10px;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

[data-theme="basic"] .svc-hero-accent {
    background: linear-gradient(90deg, var(--svc-acc), var(--svc-acc2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="basic"] .svc-hero-desc {
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

[data-theme="basic"] .svc-trust-badges span {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--svc-acc2) 30%, var(--svc-border));
    background: var(--svc-surface);
    color: #c9d2de;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Cot phai: khoi stat ---------- */
[data-theme="basic"] .svc-stat-wrap {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--svc-border);
}

[data-theme="basic"] .svc-stat-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--svc-acc) 30%, transparent), transparent 70%);
}

[data-theme="basic"] .svc-stat-hero-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--svc-acc), var(--svc-acc2));
    color: #fff;
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--svc-acc) 70%, transparent);
}

[data-theme="basic"] .svc-stat-hero-ico svg {
    width: 38px;
    height: 38px;
}

[data-theme="basic"] .svc-stat-hero-tag {
    position: absolute;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--svc-acc2) 45%, transparent);
    background: var(--svc-bg);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="basic"] .svc-stat-hero-tag.is-top {
    top: 14px;
    right: 4px;
}

[data-theme="basic"] .svc-stat-hero-tag.is-bottom {
    bottom: 14px;
    left: 4px;
}

[data-theme="basic"] .svc-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

[data-theme="basic"] .svc-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 12px;
    border: 1px solid var(--svc-border);
    background: var(--svc-surface);
    text-align: center;
}

[data-theme="basic"] .svc-stat-card svg {
    margin-bottom: 4px;
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-stat-card b {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

[data-theme="basic"] .svc-stat-card small {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--svc-muted);
}

/* ---------- Cot phai: hoat dong gan day (tu cuon) ---------- */
[data-theme="basic"] .svc-activity-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
    animation: svcPulse 1.6s ease-in-out infinite;
}

@keyframes svcPulse {
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

[data-theme="basic"] .svc-activity-viewport {
    height: 200px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
}

[data-theme="basic"] .svc-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    animation: svcActScroll calc(var(--svc-act-count, 10) * 3.2s) linear infinite;
}

[data-theme="basic"] .svc-activity-viewport:hover .svc-activity-list {
    animation-play-state: paused;
}

@keyframes svcActScroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="basic"] .svc-activity-list {
        animation: none;
    }
}

[data-theme="basic"] .svc-activity-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--svc-border);
    background: var(--svc-surface);
}

[data-theme="basic"] .svc-activity-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--svc-acc), var(--svc-acc2));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

[data-theme="basic"] .svc-activity-body {
    flex: 1;
    min-width: 0;
}

[data-theme="basic"] .svc-activity-line {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #c9d2de;
}

[data-theme="basic"] .svc-activity-line b {
    color: #fff;
}

[data-theme="basic"] .svc-activity-line em {
    font-style: normal;
    font-weight: 700;
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-activity-sub {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-activity-time {
    flex-shrink: 0;
    font-size: 10.5px;
    color: var(--svc-muted);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .svc-stat-wrap {
        grid-template-columns: 1fr;
    }

    [data-theme="basic"] .svc-stat-hero {
        min-height: 120px;
    }

    [data-theme="basic"] .svc-buy-dark .svc-buy-step:not(.is-active) {
        font-size: 0;
        gap: 0;
    }
}

/* ============================================================
   Dark mode toan theme + header dang thanh noi bo tron
   ============================================================ */
[data-theme="basic"] body,
[data-theme="basic"] .page-wrapper,
[data-theme="basic"] .page-content {
    background-color: var(--basic-bg);
    color: var(--basic-foreground);
}

[data-theme="basic"][data-bs-theme="dark"] {
    --bs-body-bg: #0b0f17;
    --bs-body-color: #e6ebf2;
    --bs-secondary-bg: #121826;
    --bs-tertiary-bg: #1a2232;
    --bs-border-color: rgba(255, 255, 255, .1);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: #8b97a8;
    --bs-heading-color: #f1f5f9;
    --bs-card-bg: #121826;
    color-scheme: dark;
}

[data-theme="basic"] .card {
    --bs-card-bg: var(--basic-surface);
    background-color: var(--basic-surface);
    border-color: var(--basic-border-strong);
}

[data-theme="basic"] .modal-content,
[data-theme="basic"] .dropdown-menu,
[data-theme="basic"] .swal2-popup {
    background-color: var(--basic-surface);
    color: var(--basic-foreground);
}

[data-theme="basic"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--basic-foreground);
    --bs-table-border-color: var(--basic-border-strong);
}

[data-theme="basic"] h1, [data-theme="basic"] h2, [data-theme="basic"] h3,
[data-theme="basic"] h4, [data-theme="basic"] h5, [data-theme="basic"] h6,
[data-theme="basic"] .page-title {
    color: var(--bs-heading-color);
}

[data-theme="basic"] .text-dark {
    color: var(--basic-foreground) !important;
}

[data-theme="basic"] .bg-white,
[data-theme="basic"] .bg-light {
    background-color: var(--basic-surface) !important;
}

/* Bien mau header: mac dinh sang, rieng trang dich vu (nen toi) doi sang bo toi */
[data-theme="basic"] {
    --hdr-bg: rgba(255, 255, 255, .88);
    --hdr-bg-solid: rgba(255, 255, 255, .97);
    --hdr-shadow: 0 10px 28px -16px rgba(31, 36, 51, .28), 0 0 0 1px rgba(31, 36, 51, .03);
    --hdr-ctl-base: #ffffff;
    --hdr-ctl-bg: #f6f7fb;
    --hdr-ctl-hover: #eceef5;
    --hdr-ctl-border: #e4e6ee;
    --hdr-text: #2a3142;
    --hdr-text-strong: #111827;
}

[data-theme="basic"] body:has(.svc-page) {
    --hdr-bg: rgba(18, 24, 38, .82);
    --hdr-bg-solid: rgba(18, 24, 38, .95);
    --hdr-shadow: 0 12px 32px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
    --hdr-ctl-base: #0f1520;
    --hdr-ctl-bg: rgba(255, 255, 255, .05);
    --hdr-ctl-hover: rgba(255, 255, 255, .09);
    --hdr-ctl-border: rgba(255, 255, 255, .1);
    --hdr-text: #e6ebf2;
    --hdr-text-strong: #ffffff;

    /* Trang dich vu giu giao dien toi: doi luon bo token chung cho dropdown/modal/the trong trang */
    --basic-bg: #0b0f17;
    --basic-surface: #121826;
    --basic-surface-2: #1a2232;
    --basic-foreground: #e6ebf2;
    --basic-muted: #8b97a8;
    --basic-border: rgba(255, 255, 255, .06);
    --basic-border-strong: rgba(255, 255, 255, .1);
    --default-background: #0b0f17;
    --default-border: rgba(255, 255, 255, .08);
    --bootstrap-card-border: rgba(255, 255, 255, .08);
    --basic-shadow-popover: 0 16px 32px -8px rgba(0, 0, 0, .6);
    --basic-shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, .7);
}

/* ---------- Header ---------- */
[data-theme="basic"] .topbar.d-print-none {
    position: sticky;
    top: 0;
    z-index: 1002;
    height: auto !important;
    min-height: 0;
    padding: 8px 16px 4px;
    margin-bottom: 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="basic"] .topbar > .container-fluid {
    padding: 0;
}

[data-theme="basic"] .topbar-custom .topbar-item {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
}

[data-theme="basic"] .topbar-custom > .topbar-item {
    height: auto !important;
    min-height: 0;
    gap: 8px;
}

[data-theme="basic"] .topbar .modern-user-pill {
    height: 40px;
}

[data-theme="basic"] .topbar .modern-user-pill img {
    width: 28px;
    height: 28px;
}

[data-theme="basic"] .topbar-custom > .topbar-item > li {
    margin-right: 0 !important;
}

[data-theme="basic"] .topbar-custom {
    min-height: 0;
    padding: 6px 8px;
    background: var(--hdr-bg) !important;
    border: 1px solid var(--hdr-ctl-border);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--hdr-shadow);
}

[data-theme="basic"] .topbar-custom.nav-sticky {
    background: var(--hdr-bg-solid) !important;
}

[data-theme="basic"] .hdr-svc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--modern-accent) 55%, transparent);
    background: color-mix(in srgb, var(--modern-accent) 10%, var(--hdr-ctl-base));
    color: var(--hdr-text-strong);
    box-shadow: 0 0 18px -6px color-mix(in srgb, var(--modern-accent) 70%, transparent);
    cursor: pointer;
}

[data-theme="basic"] .hdr-svc-btn:hover {
    background: color-mix(in srgb, var(--modern-accent) 18%, var(--hdr-ctl-base));
}

[data-theme="basic"] .hdr-svc-ico {
    font-size: 18px;
    color: var(--modern-accent);
}

[data-theme="basic"] .hdr-svc-text {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

[data-theme="basic"] .hdr-svc-text b {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

[data-theme="basic"] .hdr-svc-text small {
    white-space: nowrap;
    font-size: 10.5px;
    color: var(--basic-muted);
}

[data-theme="basic"] .hdr-svc-caret {
    font-size: 14px;
    color: var(--basic-muted);
}

[data-theme="basic"] .topbar .modern-search {
    height: 40px;
    flex: 0 1 420px;
    margin-left: 8px;
    border-radius: 12px;
    background: var(--hdr-ctl-bg);
    border: 1px solid var(--hdr-ctl-border);
}

[data-theme="basic"] .topbar .modern-search input {
    text-align: left;
    background: transparent;
    color: var(--basic-foreground);
    font-size: 14px;
}

[data-theme="basic"] .topbar .modern-search input::placeholder {
    color: var(--basic-muted);
}

[data-theme="basic"] .topbar .modern-search kbd {
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--hdr-ctl-border);
    background: var(--hdr-ctl-bg);
    color: var(--basic-muted);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    box-shadow: none;
}

[data-theme="basic"] .topbar .modern-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--hdr-ctl-bg);
    border-color: var(--hdr-ctl-border);
    color: var(--hdr-text);
}

[data-theme="basic"] .topbar .modern-pill,
[data-theme="basic"] .hdr-pill {
    height: 40px;
    background: var(--hdr-ctl-bg);
    border: 1px solid var(--hdr-ctl-border);
    border-radius: 12px;
    color: var(--hdr-text);
}

[data-theme="basic"] .hdr-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

[data-theme="basic"] .hdr-pill > i:first-child {
    font-size: 18px;
}

[data-theme="basic"] .hdr-pill:hover,
[data-theme="basic"] .topbar .modern-pill:hover,
[data-theme="basic"] .topbar .modern-icon-btn:hover {
    background: var(--hdr-ctl-hover);
    color: var(--hdr-text-strong);
}

[data-theme="basic"] .hdr-tools-menu {
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
}

[data-theme="basic"] .hdr-tools-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--basic-foreground);
}

[data-theme="basic"] .hdr-tools-menu .dropdown-item i {
    font-size: 17px;
    color: var(--basic-muted);
}

[data-theme="basic"] .hdr-tools-menu .dropdown-item:hover {
    background: var(--hdr-ctl-bg);
}

[data-theme="basic"] .hdr-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

[data-theme="basic"] .hdr-btn-ghost {
    border: 1px solid var(--hdr-ctl-border);
    background: var(--hdr-ctl-bg);
    color: var(--hdr-text);
}

[data-theme="basic"] .hdr-btn-ghost:hover {
    background: var(--hdr-ctl-hover);
    color: var(--hdr-text-strong);
}

[data-theme="basic"] .hdr-btn-solid {
    background: var(--modern-accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--modern-accent) 80%, transparent);
}

[data-theme="basic"] .hdr-btn-solid:hover {
    background: var(--modern-accent-hover);
    color: #fff;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .topbar.d-print-none {
        padding: 8px 8px 4px;
    }

    [data-theme="basic"] .hdr-btn {
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
    }

    [data-theme="basic"] .hdr-svc-btn {
        height: 40px;
        padding: 0 10px;
    }
}

[data-theme="basic"] .select2-container--default .select2-selection--single,
[data-theme="basic"] .select2-container--default .select2-selection--multiple {
    background-color: var(--basic-surface);
    border-color: var(--basic-border-strong);
    color: var(--basic-foreground);
}

[data-theme="basic"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--basic-foreground);
}

[data-theme="basic"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: 0;
}

[data-theme="basic"] .select2-dropdown {
    background-color: var(--basic-surface);
    color: var(--basic-foreground);
}

[data-theme="basic"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--basic-surface-2);
    border-color: var(--basic-border-strong);
    color: var(--basic-foreground);
}

[data-theme="basic"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="basic"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--modern-accent);
    color: var(--hdr-text-strong);
}

/* ---------- Trang dich vu: khoi noi dung SEO (nen sang, 2 cot: chu + anh) ---------- */
[data-theme="basic"] .svc-seo,
[data-theme="basic"] #seoContent.svc-seo {
    --seo-acc: var(--svc-acc, #8a4bea);
    --seo-bg: color-mix(in srgb, var(--seo-acc) 4%, #fff);
    position: relative;
    padding: 56px clamp(18px, 5vw, 72px) 40px;
    border-radius: 24px;
    background: var(--seo-bg);
    color: #3f4756;
    color-scheme: light;
}

[data-theme="basic"] .svc-seo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 32px 40px;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
}

[data-theme="basic"] .svc-seo-grid:not(:has(.svc-seo-side)),
[data-theme="basic"] .svc-seo:not(.expanded) .svc-seo-grid:not(:has(.svc-seo-media)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
}

[data-theme="basic"] .svc-seo-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--seo-acc);
}

[data-theme="basic"] .svc-seo #seoContentText {
    max-height: 330px;
    padding: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #4b5563;
}

[data-theme="basic"] #seoContent.svc-seo:not(.expanded) #seoContentText::after {
    background: linear-gradient(to top, var(--seo-bg) 15%, transparent 100%) !important;
}

[data-theme="basic"] .svc-seo #seoContentText p,
[data-theme="basic"] .svc-seo #seoContentText li,
[data-theme="basic"] .svc-seo #seoContentText td {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.75;
}

[data-theme="basic"] .svc-seo #seoContentText strong,
[data-theme="basic"] .svc-seo #seoContentText b {
    color: #1f2430;
    font-weight: 700;
}

[data-theme="basic"] .svc-seo #seoContentText a {
    color: var(--seo-acc);
}

[data-theme="basic"] .svc-seo #seoContentText h2,
[data-theme="basic"] .svc-seo #seoContentText h3,
[data-theme="basic"] .svc-seo #seoContentText h4 {
    margin: 28px 0 12px;
    padding: 0;
    border: 0;
    color: #1b1f2a;
    font-weight: 800;
    line-height: 1.3;
}

[data-theme="basic"] .svc-seo #seoContentText h2 {
    font-size: 24px;
}

[data-theme="basic"] .svc-seo #seoContentText h3 {
    font-size: 19px;
}

[data-theme="basic"] .svc-seo #seoContentText > :is(h1, h2):first-child {
    margin-top: 0;
    font-size: clamp(24px, 2.6vw, 32px);
}

[data-theme="basic"] .svc-seo #seoContentText > :is(h1, h2):first-child::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: var(--seo-acc);
}

[data-theme="basic"] .svc-seo #seoContentText h2::before,
[data-theme="basic"] .svc-seo #seoContentText h3::before {
    display: none;
}

[data-theme="basic"] .svc-seo #seoContentText blockquote {
    position: relative;
    margin: 18px 0;
    padding: 14px 18px 14px 46px;
    border: 1px solid color-mix(in srgb, var(--seo-acc) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--seo-acc) 6%, #fff);
    color: #4b5563;
    font-size: 14px;
}

[data-theme="basic"] .svc-seo #seoContentText blockquote::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 18px;
    height: 18px;
    background: var(--seo-acc);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1Zm3-19a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1Zm3-19a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-theme="basic"] .svc-seo #seoContentText table th {
    background: color-mix(in srgb, var(--seo-acc) 8%, #fff);
    color: #1f2430;
}

[data-theme="basic"] .svc-seo #seoContentText img {
    border-radius: 12px;
}

[data-theme="basic"] .svc-seo-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

[data-theme="basic"] .svc-seo-media {
    margin: 0;
    padding: 8px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(31, 36, 48, .25), 0 0 0 1px rgba(31, 36, 48, .05);
}

[data-theme="basic"] .svc-seo-media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
}

[data-theme="basic"] .svc-seo-toc {
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(31, 36, 48, .08);
}

[data-theme="basic"] .svc-seo:not(.expanded) .svc-seo-toc,
[data-theme="basic"] .svc-seo:not(.expanded) .svc-seo-side:not(:has(.svc-seo-media)) {
    display: none;
}

[data-theme="basic"] .svc-seo-toc .header-toc,
[data-theme="basic"] .svc-seo-toc .header-title-toc {
    background: transparent;
    color: #1f2430;
    font-weight: 700;
}

[data-theme="basic"] .svc-seo-toc .header-title-toc i {
    color: var(--seo-acc);
}

[data-theme="basic"] .svc-seo-toc #tocContainer {
    max-height: 50vh;
    overflow-y: auto;
    background: transparent;
}

[data-theme="basic"] .svc-seo-toc a {
    color: #4b5563;
    font-size: 13.5px;
    text-decoration: none;
}

[data-theme="basic"] .svc-seo-toc a:hover,
[data-theme="basic"] .svc-seo-toc a.active {
    color: var(--seo-acc);
}

[data-theme="basic"] .svc-seo-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

[data-theme="basic"] #seoContent #showMoreBtn.svc-seo-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: min(100%, 388px);
    height: 60px;
    padding: 0 32px;
    border: 2px solid color-mix(in srgb, var(--seo-acc) 35%, #fff);
    border-radius: 999px;
    background: #fff;
    color: var(--seo-acc);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--seo-acc) 55%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}

[data-theme="basic"] #seoContent #showMoreBtn.svc-seo-more::before {
    content: "";
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    order: -2;
    background: color-mix(in srgb, var(--seo-acc) 12%, #fff);
}

[data-theme="basic"] #seoContent #showMoreBtn.svc-seo-more::after {
    content: "";
    order: -1;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 9px 0 -35px;
    border: 0;
    transform: none;
    background: var(--seo-acc);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}

[data-theme="basic"] #seoContent.expanded #showMoreBtn.svc-seo-more::after {
    transform: rotate(180deg);
}

[data-theme="basic"] #seoContent #showMoreBtn.svc-seo-more:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--seo-acc) 70%, transparent);
}

@media (max-width: 991.98px) {
    [data-theme="basic"] .svc-seo {
        padding: 32px 18px 28px;
    }

    [data-theme="basic"] .svc-seo-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-theme="basic"] .svc-seo-side {
        position: static;
        order: -1;
    }
}

[data-theme="basic"] .svc-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--svc-muted);
}

[data-theme="basic"] .svc-crumb a {
    color: var(--svc-muted);
    text-decoration: none;
}

[data-theme="basic"] .svc-crumb a:hover {
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-crumb i {
    font-size: 11px;
    opacity: .7;
}

[data-theme="basic"] .svc-crumb span {
    color: var(--hdr-text-strong);
    font-weight: 600;
}

/* ---------- Modal thong bao dich vu (#staticBackdrop) — the toi gon ---------- */
[data-theme="basic"] #staticBackdrop .modal-dialog {
    max-width: 460px;
}

[data-theme="basic"] #staticBackdrop .modal-content {
    overflow: hidden;
    border: 1px solid var(--hdr-ctl-border);
    border-radius: 20px;
    background: #121826;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
}

[data-theme="basic"] #staticBackdrop .modal-header {
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 20px 56px 14px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

[data-theme="basic"] #staticBackdrop .modal-header::before {
    content: "";
    position: static;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 20px no-repeat,
        linear-gradient(135deg, var(--svc-acc, var(--modern-accent)), var(--svc-acc2, var(--modern-accent)));
    box-shadow: none;
    transform: none;
}

[data-theme="basic"] #staticBackdrop .modal-header::after {
    display: none;
}

[data-theme="basic"] #staticBackdrop .modal-header .modal-title {
    width: auto;
    color: var(--hdr-text-strong);
    font-size: 17px;
    font-weight: 700;
    text-align: left;
}

[data-theme="basic"] #staticBackdrop .modal-header .btn-close {
    top: 22px;
    right: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .06);
    background-size: 12px;
    filter: invert(1);
    opacity: .7;
}

[data-theme="basic"] #staticBackdrop .modal-body {
    margin: 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid var(--svc-acc2, var(--modern-accent));
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #c9d2de;
    font-size: 14px;
    line-height: 1.7;
}

[data-theme="basic"] #staticBackdrop .modal-body * {
    color: inherit;
}

[data-theme="basic"] #staticBackdrop .modal-body strong,
[data-theme="basic"] #staticBackdrop .modal-body b {
    color: var(--hdr-text-strong);
}

[data-theme="basic"] #staticBackdrop .modal-footer {
    padding: 16px 20px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-theme="basic"] #staticBackdrop .modal-footer .btn {
    min-height: 46px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--svc-acc, var(--modern-accent)), var(--svc-acc2, var(--modern-accent)));
    font-size: 14px;
    box-shadow: none;
}

[data-theme="basic"] #staticBackdrop .modal-footer .btn:hover:not(:disabled) {
    background: linear-gradient(90deg, var(--svc-acc, var(--modern-accent)), var(--svc-acc2, var(--modern-accent)));
    filter: brightness(1.08);
    box-shadow: none;
}

[data-theme="basic"] #staticBackdrop .modal-footer .btn:disabled {
    opacity: .55;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] #staticBackdrop .modal-dialog {
        margin: 14px;
    }

    [data-theme="basic"] #staticBackdrop .modal-header {
        padding: 18px 52px 12px 18px;
    }

    [data-theme="basic"] #staticBackdrop .modal-body {
        margin: 0 18px;
    }

    [data-theme="basic"] #staticBackdrop .modal-footer {
        padding: 14px 18px 18px;
    }
}

[data-theme="basic"] .hdr-svc-btn.is-icon {
    justify-content: center;
    width: 40px;
    padding: 0;
}

[data-theme="basic"] .svc-buy-dark .variant-select-group .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hdr-text-strong);
}

[data-theme="basic"] .svc-buy-dark .variant-select-group .form-label::before {
    content: "";
    width: 15px;
    height: 15px;
    background: var(--svc-acc2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.4 3.3 3.3-1.4 1.4-3.9-3.9V6h2v6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 10.4 3.3 3.3-1.4 1.4-3.9-3.9V6h2v6.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Trang dich vu: hop mo ta cach dat + linh vat ---------- */
[data-theme="basic"] .svc-stat-wrap {
    grid-template-columns: 230px 1fr;
    align-items: center;
}

[data-theme="basic"] .svc-stat-card b {
    font-size: 18px;
}

[data-theme="basic"] .svc-mascot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
}

[data-theme="basic"] .svc-mascot-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--svc-acc) 45%, transparent) 0%, transparent 68%);
    animation: svcGlow 3.2s ease-in-out infinite;
}

@keyframes svcGlow {
    50% { transform: scale(1.12); opacity: .7; }
}

[data-theme="basic"] .svc-mascot-bot {
    position: relative;
    width: 200px;
    animation: svcBotFloat 4s ease-in-out infinite;
}

@keyframes svcBotFloat {
    50% { transform: translateY(-8px); }
}

[data-theme="basic"] .svc-mascot-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45));
}

[data-theme="basic"] .svc-mascot-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 34px;
    background: linear-gradient(145deg, var(--svc-acc), var(--svc-acc2));
    color: var(--hdr-text-strong);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -10px 20px rgba(0, 0, 0, .18), 0 22px 40px -14px color-mix(in srgb, var(--svc-acc) 75%, transparent);
}

[data-theme="basic"] .svc-mascot-tile svg {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
}

[data-theme="basic"] .svc-mascot-pop {
    position: absolute;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
    animation: svcPop 3.6s ease-out infinite;
}

[data-theme="basic"] .svc-mascot-pop.p1 { left: 6%; top: 30%; }
[data-theme="basic"] .svc-mascot-pop.p2 { left: 22%; top: 6%; animation-delay: -1.2s; }
[data-theme="basic"] .svc-mascot-pop.p3 { left: 72%; top: 8%; animation-delay: -2.4s; }

@keyframes svcPop {
    0% { opacity: 0; transform: translateY(0) scale(.5); }
    15% { opacity: 1; transform: translateY(-6px) scale(1.1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-46px) scale(.9); }
}

[data-theme="basic"] .svc-mascot-tag {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--svc-acc2) 55%, transparent);
    border-radius: 999px;
    background: rgba(11, 15, 23, .85);
    color: var(--hdr-text-strong);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6);
    animation: svcTag 3.6s ease-in-out infinite;
}

[data-theme="basic"] .svc-mascot-tag i {
    font-size: 12px;
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-mascot-tag.t1 {
    top: 10px;
    right: 0;
}

[data-theme="basic"] .svc-mascot-tag.t2 {
    top: 46%;
    right: -6px;
    animation-delay: -1.2s;
}

[data-theme="basic"] .svc-mascot-tag.t3 {
    bottom: 14px;
    left: 0;
    animation-delay: -2.4s;
}

@keyframes svcTag {
    50% { transform: translateY(-5px); }
}

[data-theme="basic"] .svc-mascot-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--svc-acc2);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: svcSpark 2.4s ease-in-out infinite;
}

[data-theme="basic"] .svc-mascot-spark.s1 {
    top: 18%;
    left: 14%;
}

[data-theme="basic"] .svc-mascot-spark.s2 {
    top: 30%;
    right: 18%;
    width: 7px;
    height: 7px;
    animation-delay: -.8s;
}

[data-theme="basic"] .svc-mascot-spark.s3 {
    bottom: 22%;
    right: 26%;
    width: 8px;
    height: 8px;
    background: #fff;
    animation-delay: -1.6s;
}

@keyframes svcSpark {
    0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
    50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="basic"] .svc-mascot *,
    [data-theme="basic"] .svc-mascot-glow {
        animation: none !important;
    }
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .svc-stat-wrap {
        grid-template-columns: 1fr;
    }
}

[data-theme="basic"] .svc-crumb .svc-crumb-mid {
    color: var(--svc-muted);
    font-weight: 400;
}

/* ============================================================
   Sidebar: muc nen tang (icon thuong hieu + so dich vu) + bang dich vu bung ra (desktop)
   ============================================================ */
[data-theme="basic"] .startbar .sb-plat-link {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background-color .15s ease, border-color .15s ease;
}

[data-theme="basic"] .startbar .sb-plat-link:hover,
[data-theme="basic"] .startbar .sb-plat-link.is-active,
[data-theme="basic"] .startbar .sb-plat-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .1);
}

[data-theme="basic"] .startbar .sb-plat-link.is-active .sb-chev {
    color: var(--modern-accent);
}

[data-theme="basic"] .sb-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
    color: var(--modern-accent);
    background: rgba(255, 255, 255, .06);
}

[data-theme="basic"] .sb-brand.is-facebook { color: #fff; background: #1877f2; }
[data-theme="basic"] .sb-brand.is-tiktok { color: #fff; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
[data-theme="basic"] .sb-brand.is-tiktok i { filter: drop-shadow(-1.5px -1.5px 0 #25f4ee) drop-shadow(1.5px 1.5px 0 #fe2c55); }
[data-theme="basic"] .sb-brand.is-instagram { color: #fff; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
[data-theme="basic"] .sb-brand.is-threads { color: #fff; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
[data-theme="basic"] .sb-brand.is-twitter { color: #fff; background: #1d9bf0; }
[data-theme="basic"] .sb-brand.is-youtube { color: #fff; background: #ff0033; }
[data-theme="basic"] .sb-brand.is-telegram { color: #fff; background: #2aabee; }
[data-theme="basic"] .sb-brand.is-shopee { color: #fff; background: #ee4d2d; }
[data-theme="basic"] .sb-brand.is-lazada { color: #fff; background: linear-gradient(135deg, #0f146d, #f0569e); }
[data-theme="basic"] .sb-brand.is-discord { color: #fff; background: #5865f2; }
[data-theme="basic"] .sb-brand.is-twitch { color: #fff; background: #9146ff; }
[data-theme="basic"] .sb-brand.is-spotify { color: #fff; background: #1db954; }
[data-theme="basic"] .sb-brand.is-google { color: #fff; background: #4285f4; }
[data-theme="basic"] .sb-brand.is-zalo { color: #fff; background: #0068ff; }

[data-theme="basic"] .sb-plat-text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}

[data-theme="basic"] .sb-plat-text b {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    color: #f1f5f9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .sb-plat-text small {
    margin-top: 1px;
    font-size: 11px;
    color: #8b97a8;
}

/* Danh sach dich vu (trong sidebar tren mobile + trong bang bung ra) */
[data-theme="basic"] .sb-svc {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 12px;
    color: #e6ebf2 !important;
    text-decoration: none;
}

[data-theme="basic"] .sb-svc:hover {
    background: rgba(255, 255, 255, .06) !important;
}

[data-theme="basic"] .sb-svc-ico {
    flex-shrink: 0;
    width: 20px;
    font-size: 16px;
    text-align: center;
    color: #e6ebf2;
}

[data-theme="basic"] .sb-svc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .sb-svc-now {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #60a5fa;
}

[data-theme="basic"] .sb-svc-go {
    flex-shrink: 0;
    font-size: 11px;
    color: #8b97a8;
    transform: rotate(-45deg);
    transition: color .15s ease, transform .15s ease;
}

[data-theme="basic"] .sb-svc:hover .sb-svc-go {
    color: #fff;
    transform: rotate(-45deg) translateX(2px);
}

[data-theme="basic"] .sb-svc.is-now .sb-svc-ico,
[data-theme="basic"] .sb-svc.is-now .sb-svc-name {
    color: #fff;
}

/* Bang dich vu bung ra ben phai sidebar (desktop) */
[data-theme="basic"] .sb-flyout {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 270px;
    z-index: 1040;
    width: min(680px, calc(100vw - 290px));
    padding: 22px 22px 24px;
    overflow-y: auto;
    background: #1b232d;
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

[data-theme="basic"] .sb-flyout.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

[data-theme="basic"] .sb-flyout-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

[data-theme="basic"] .sb-flyout-head b {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

[data-theme="basic"] .sb-flyout-head small {
    font-size: 12px;
    color: #8b97a8;
}

[data-theme="basic"] .sb-flyout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-theme="basic"] .sb-flyout-grid .nav-item {
    list-style: none;
}

[data-theme="basic"] .sb-flyout .sb-svc {
    padding: 12px 14px !important;
}

[data-theme="basic"] .sb-flyout .sb-svc-name {
    font-size: 14.5px;
}

@media (min-width: 992px) {
    [data-theme="basic"] .startbar .sb-plat > .collapse,
    [data-theme="basic"] .startbar .sb-plat > .collapsing {
        display: none !important;
    }

    [data-theme="basic"] .startbar .startbar-menu .sb-plat-link .sb-chev {
        transform: none !important;
    }
}

/* Moi muc sidebar cung 1 co o icon 32px + cung le, de cac muc thuong va muc nen tang thang hang */
[data-theme="basic"] .startbar .startbar-menu .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-icon,
[data-theme="basic"] .startbar .startbar-menu .nav-link > .menu-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 9px;
    background: transparent;
    font-size: 17px;
}

[data-theme="basic"] .startbar .startbar-menu .nav-link .sb-icon svg {
    width: 17px;
    height: 17px;
}

[data-theme="basic"] .startbar .startbar-menu .collapse .nav-link > .menu-icon,
[data-theme="basic"] .startbar .startbar-menu .collapse .nav-link .sb-icon {
    width: 32px;
    height: 32px;
    background: transparent;
    font-size: 17px;
}

@media (max-width: 991.98px) {
    [data-theme="basic"] .sb-flyout {
        display: none;
    }
}

[data-theme="basic"] .sb-brand.is-product { color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); }
[data-theme="basic"] .sb-brand.is-proxy { color: #fff; background: linear-gradient(135deg, #10b981, #06b6d4); }

[data-theme="basic"] .sb-svc-img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
}

/* ============================================================
   Trang nap tien: chon phuong thuc dang the (bat buoc chon truoc)
   ============================================================ */
[data-theme="basic"] .rc-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

[data-theme="basic"] .rc-method {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 16px;
    background: var(--basic-surface);
    color: var(--basic-foreground);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .1s ease;
}

[data-theme="basic"] button.rc-method {
    cursor: pointer;
}

[data-theme="basic"] button.rc-method:hover {
    border-color: color-mix(in srgb, #2563eb 45%, var(--basic-border-strong));
    box-shadow: 0 10px 24px -16px rgba(37, 99, 235, .45);
}

[data-theme="basic"] button.rc-method:active {
    transform: translateY(1px);
}

[data-theme="basic"] .rc-method.is-active {
    border-color: #2563eb;
    background: linear-gradient(135deg, #f3f7ff, #eef4ff);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12), 0 12px 26px -18px rgba(37, 99, 235, .6);
}

[data-theme="basic"] .rc-method-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--basic-border-strong);
    border-radius: 14px;
    background: #fff;
    font-size: 22px;
}

[data-theme="basic"] .rc-method-ico.is-bank {
    color: #6d5ffa;
    background: linear-gradient(135deg, #ecf2ff, #f5efff);
}

[data-theme="basic"] .rc-method-ico.is-usdt {
    background: #e8f7f1;
}

[data-theme="basic"] .rc-method-ico.is-razorpay {
    color: #fff;
    background: linear-gradient(135deg, #0c2451, #3395ff);
}

[data-theme="basic"] .rc-method-ico.is-card {
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ef4444);
}

[data-theme="basic"] .rc-method-ico.is-soon {
    color: #9ca3af;
    background: #f7f7f9;
}

[data-theme="basic"] .rc-method-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding-right: 26px;
}

[data-theme="basic"] .rc-method-body b {
    font-size: 16px;
    font-weight: 700;
    color: var(--basic-foreground);
}

[data-theme="basic"] .rc-method.is-active .rc-method-body b {
    color: #2563eb;
}

[data-theme="basic"] .rc-method-body small {
    font-size: 13px;
    line-height: 1.45;
    color: var(--basic-muted);
}

[data-theme="basic"] .rc-method-body em {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    color: #2563eb;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
}

[data-theme="basic"] .rc-method-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

[data-theme="basic"] .rc-method.is-active .rc-method-check {
    opacity: 1;
    transform: none;
}

[data-theme="basic"] .rc-method.is-soon {
    min-height: 76px;
    opacity: .6;
    filter: grayscale(1);
    cursor: not-allowed;
}

[data-theme="basic"] .rc-method.is-soon .rc-method-ico {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

[data-theme="basic"] .rc-method.is-soon .rc-method-body b {
    font-size: 15px;
    color: #4b5563;
}

[data-theme="basic"] .rc-method-soon {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #b8bcc6;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

[data-theme="basic"] .rc-method.is-extra {
    display: none;
}

[data-theme="basic"] .rc-methods.show-extra .rc-method.is-extra {
    display: flex;
}

[data-theme="basic"] .rc-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6d5ffa, #a855f7);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 22px -12px rgba(109, 95, 250, .8);
}

[data-theme="basic"] .rc-more i {
    font-size: 11px;
    transition: transform .2s ease;
}

[data-theme="basic"] .rc-more.is-open i {
    transform: rotate(180deg);
}

[data-theme="basic"] .rc-body.is-empty > .tab-content {
    display: none;
}

[data-theme="basic"] .rc-empty {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    border: 1.5px dashed var(--basic-border-strong);
    border-radius: 14px;
    background: var(--basic-surface-2);
    color: var(--basic-muted);
    font-size: 14px;
    text-align: center;
}

[data-theme="basic"] .rc-body.is-empty > .rc-empty {
    display: flex;
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .rc-methods {
        grid-template-columns: 1fr;
    }
}

/* app.min.css ep moi span trong link sidebar ve inline-block khi sidebar mo (mobile) -> giu lai bo cuc rieng */
[data-theme="basic"] .startbar-menu .navbar-nav .nav-item .nav-link .sb-brand,
[data-theme="basic"] .startbar-menu .navbar-nav .nav-item .nav-link .sb-icon {
    display: inline-flex;
}

[data-theme="basic"] .startbar-menu .navbar-nav .nav-item .nav-link .sb-plat-text {
    display: flex;
}

[data-theme="basic"] .startbar-menu .navbar-nav .nav-item .nav-link .sb-chev {
    display: inline-flex;
}

/* ============================================================
   Mobile: bang "Dich vu" noi (nut menu o header) + nut "..." mo sidebar
   ============================================================ */
[data-theme="basic"] .mob-more-btn {
    font-size: 16px;
}

[data-theme="basic"] .mob-svc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(8, 12, 20, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}

[data-theme="basic"] .mob-svc-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

[data-theme="basic"] .mob-svc {
    position: fixed;
    top: 70px;
    left: 8px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    padding: 14px 14px 10px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    background: rgba(236, 240, 248, .94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -18px rgba(8, 12, 20, .55);
    color: #1f2433;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

[data-theme="basic"] .mob-svc.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

[data-theme="basic"] .mob-svc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px 12px;
    border-bottom: 1px solid rgba(31, 36, 51, .08);
}

[data-theme="basic"] .mob-svc-head b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .mob-svc-back {
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1f2433;
}

[data-theme="basic"] .mob-svc-back.is-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-theme="basic"] .mob-svc-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1f2433;
    font-size: 16px;
    box-shadow: 0 4px 12px -6px rgba(31, 36, 51, .35);
}

[data-theme="basic"] .mob-svc-search {
    position: relative;
    margin: 12px 0 8px;
}

[data-theme="basic"] .mob-svc-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #6b7280;
    transform: translateY(-50%);
}

[data-theme="basic"] .mob-svc-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid rgba(31, 36, 51, .1);
    border-radius: 14px;
    outline: 0;
    background: #fff;
    color: #1f2433;
    font-size: 15px;
}

[data-theme="basic"] .mob-svc-search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

[data-theme="basic"] .mob-svc-hint {
    padding: 4px 4px 6px;
    font-size: 12.5px;
    color: #6b7280;
}

[data-theme="basic"] .mob-svc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
}

[data-theme="basic"] .mob-svc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-theme="basic"] .mob-svc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1f2433;
    text-align: left;
    text-decoration: none;
}

[data-theme="basic"] .mob-svc-row:active,
[data-theme="basic"] .mob-svc-row:hover {
    background: rgba(255, 255, 255, .75);
    color: #1f2433;
}

[data-theme="basic"] .mob-svc-row.is-now {
    background: rgba(37, 99, 235, .1);
}

[data-theme="basic"] .mob-svc-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 6px -3px rgba(31, 36, 51, .3);
}

[data-theme="basic"] .mob-svc-ico.is-brand {
    background: transparent;
    box-shadow: none;
}

[data-theme="basic"] .mob-svc-ico .sb-brand {
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 11px;
    font-size: 17px;
}

[data-theme="basic"] .mob-svc-ico .sb-svc-ico {
    width: auto;
    color: #2a3142;
    font-size: 16px;
}

[data-theme="basic"] .mob-svc-ico .sb-svc-img {
    width: 26px;
    height: 26px;
}

[data-theme="basic"] .mob-svc-text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}

[data-theme="basic"] .mob-svc-text b {
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .mob-svc-text small {
    margin-top: 1px;
    font-size: 12px;
    color: #6b7280;
}

[data-theme="basic"] .mob-svc-go {
    flex-shrink: 0;
    color: #6b7280;
    font-size: 13px;
}

[data-theme="basic"] .mob-svc-items .mob-svc-go {
    font-size: 11px;
    transform: rotate(-45deg);
}

[data-theme="basic"] .mob-svc-empty {
    padding: 18px 8px;
    color: #6b7280;
    text-align: center;
}

@media (min-width: 992px) {
    [data-theme="basic"] .mob-svc,
    [data-theme="basic"] .mob-svc-backdrop {
        display: none;
    }
}

/* Nen anh sang + khung theo mau tung dich vu (--svc-acc/--svc-acc2 dat tren .svc-page) */
[data-theme="basic"] .svc-page {
    border-radius: 28px;
}

[data-theme="basic"] .svc-page .svc-buy-dark,
[data-theme="basic"] .svc-page .svc-trust-card {
    border-color: color-mix(in srgb, var(--svc-acc) 42%, rgba(255, 255, 255, .06));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--svc-acc) 9%, transparent), transparent 38%),
        var(--svc-bg);
}

/* ---------- Mau nhan theme: gradient tim-hong cho cac nut/khoi dac ---------- */
[data-theme="basic"] .btn-primary,
[data-theme="basic"] .hdr-btn-solid,
[data-theme="basic"] .swal2-styled.swal2-confirm,
[data-theme="basic"] .nav-pills .nav-link.active {
    background: var(--modern-accent-grad);
    border-color: transparent;
    color: #fff;
}

[data-theme="basic"] .btn-primary:hover,
[data-theme="basic"] .btn-primary:focus,
[data-theme="basic"] .btn-primary:active,
[data-theme="basic"] .hdr-btn-solid:hover {
    background: var(--modern-accent-grad) !important;
    filter: brightness(1.07) saturate(1.1);
    color: #fff;
}

[data-theme="basic"] .modern-step-circle[style*="--modern-accent"] {
    background: var(--modern-accent-grad) !important;
}

/* Danh sach server (dropdown) sang hon: chu ro, dong dang chon noi bat */
[data-theme="basic"] .svc-buy-dark .server-item .form-check-label,
[data-theme="basic"] .svc-buy-dark .server-item .form-check-label sp,
[data-theme="basic"] .svc-buy-dark .server-item .form-check-label .fw-semibold {
    color: #eef2f7;
}

[data-theme="basic"] .svc-buy-dark .server-item .text-primary {
    font-weight: 800;
}

[data-theme="basic"] .svc-buy-dark .server-item:hover {
    background: rgba(255, 255, 255, .07);
}

[data-theme="basic"] .svc-buy-dark .server-item:has(.form-check-input:checked[type=radio]) {
    background: color-mix(in srgb, var(--svc-acc) 26%, var(--svc-surface-2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--svc-acc) 55%, transparent);
}

[data-theme="basic"] .svc-buy-dark .server-item:has(.form-check-input:checked[type=radio]) .form-check-label,
[data-theme="basic"] .svc-buy-dark .server-item:has(.form-check-input:checked[type=radio]) .form-check-label sp,
[data-theme="basic"] .svc-buy-dark .server-item:has(.form-check-input:checked[type=radio]) .form-check-label .fw-semibold {
    color: #fff;
}

[data-theme="basic"] .svc-buy-dark .server-item.disabled .form-check-label {
    color: #9aa6b8;
}

/* Gia server mau vang gold, bo nut "Xem chi tiet" */
[data-theme="basic"] .svc-buy-dark .server-item .text-primary,
[data-theme="basic"] .svc-buy-dark .form-servers .server-item .text-primary {
    color: #f5c451 !important;
    font-weight: 800;
}

[data-theme="basic"] .svc-buy-dark .form-servers .badge.view-detail {
    display: none !important;
}

/* 3 o thong tin sau khi chon server: TG trung binh / TG bat dau / do on dinh */
[data-theme="basic"] .svc-buy-dark .svc-stats3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

[data-theme="basic"] .svc-buy-dark .svc-stat3 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--svc-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--svc-acc) 6%, var(--svc-surface));
}

[data-theme="basic"] .svc-buy-dark .svc-stat3-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--svc-acc) 18%, transparent);
    color: var(--svc-acc2);
}

[data-theme="basic"] .svc-buy-dark .svc-stat3-txt {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25;
}

[data-theme="basic"] .svc-buy-dark .svc-stat3-txt small {
    overflow: hidden;
    font-size: 11px;
    color: var(--svc-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .svc-buy-dark .svc-stat3-txt b {
    overflow: hidden;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="basic"] .svc-buy-dark .svc-stat3.is-pending .svc-stat3-txt b {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--svc-muted);
}

@media (max-width: 575.98px) {
    [data-theme="basic"] .svc-buy-dark .svc-stats3 { grid-template-columns: 1fr; }
}

/* Service page: chua chon may chu thi an mo ta, thong tin, so luong/phut, tong tien, nut mua */
[data-theme="basic"] .svc-noserver #details,
[data-theme="basic"] .svc-noserver #svinfo,
[data-theme="basic"] .svc-noserver .svc-adv,
[data-theme="basic"] .svc-noserver .svc-sum,
[data-theme="basic"] .svc-noserver .qb-submit { display: none !important; }

/* ---------- Trang dich vu: bang mau theo TUNG NEN TANG (nen trang, hop, nut, chu) — mo phong socialboost ---------- */
[data-theme="basic"] .svc-page[data-plat="instagram"] {
    --svc-acc: #e4405f;
    --svc-acc2: #fcaf45;
    --svc-base: #140a24;
    --svc-bg: color-mix(in srgb, #e4405f 6%, #140a24);
    --svc-surface: color-mix(in srgb, #e4405f 9%, #140a24);
    --svc-surface-2: color-mix(in srgb, #e4405f 14%, #140a24);
    --svc-border: color-mix(in srgb, #e4405f 22%, rgba(255, 255, 255, .08));
    --svc-text: #e8e4f0;
    --svc-muted: #a79fbd;
    --svc-btn: linear-gradient(135deg,#e4405f 0%,#833ab4 50%,#fcaf45 100%);
}
[data-theme="basic"] .svc-page[data-plat="facebook"] {
    --svc-acc: #1877f2;
    --svc-acc2: #42a5f5;
    --svc-base: #0a1430;
    --svc-bg: color-mix(in srgb, #1877f2 6%, #0a1430);
    --svc-surface: color-mix(in srgb, #1877f2 9%, #0a1430);
    --svc-surface-2: color-mix(in srgb, #1877f2 14%, #0a1430);
    --svc-border: color-mix(in srgb, #1877f2 22%, rgba(255, 255, 255, .08));
    --svc-text: #e6eefc;
    --svc-muted: #9aaed0;
    --svc-btn: linear-gradient(135deg,#1877f2 0%,#0a5bd6 100%);
}
[data-theme="basic"] .svc-page[data-plat="tiktok"] {
    --svc-acc: #25f4ee;
    --svc-acc2: #fe2c55;
    --svc-base: #0a0a1a;
    --svc-bg: color-mix(in srgb, #25f4ee 5%, #0a0a1a);
    --svc-surface: color-mix(in srgb, #25f4ee 8%, #0a0a1a);
    --svc-surface-2: color-mix(in srgb, #25f4ee 13%, #0a0a1a);
    --svc-border: color-mix(in srgb, #25f4ee 22%, rgba(255, 255, 255, .08));
    --svc-text: #f1f3f6;
    --svc-muted: #9aa0ad;
    --svc-btn: linear-gradient(135deg, #fe2c55 0%, #c4147d 55%, #25f4ee 130%);
}
[data-theme="basic"] .svc-page[data-plat="youtube"] {
    --svc-acc: #ff2d2d;
    --svc-acc2: #ff8a65;
    --svc-base: #1c0808;
    --svc-bg: color-mix(in srgb, #ff2d2d 6%, #1c0808);
    --svc-surface: color-mix(in srgb, #ff2d2d 9%, #1c0808);
    --svc-surface-2: color-mix(in srgb, #ff2d2d 14%, #1c0808);
    --svc-border: color-mix(in srgb, #ff2d2d 22%, rgba(255, 255, 255, .08));
    --svc-text: #f8eaea;
    --svc-muted: #b99a9a;
    --svc-btn: linear-gradient(135deg,#ff0000 0%,#cc0000 100%);
}
[data-theme="basic"] .svc-page[data-plat="twitter"] {
    --svc-acc: #1d9bf0;
    --svc-acc2: #7dd3fc;
    --svc-base: #0a141f;
    --svc-bg: color-mix(in srgb, #1d9bf0 6%, #0a141f);
    --svc-surface: color-mix(in srgb, #1d9bf0 9%, #0a141f);
    --svc-surface-2: color-mix(in srgb, #1d9bf0 14%, #0a141f);
    --svc-border: color-mix(in srgb, #1d9bf0 22%, rgba(255, 255, 255, .08));
    --svc-text: #e7f1fa;
    --svc-muted: #93a8bb;
    --svc-btn: linear-gradient(135deg,#1d9bf0 0%,#0b6fb8 100%);
}
[data-theme="basic"] .svc-page[data-plat="telegram"] {
    --svc-acc: #229ed9;
    --svc-acc2: #5bc8f5;
    --svc-base: #0a1823;
    --svc-bg: color-mix(in srgb, #229ed9 6%, #0a1823);
    --svc-surface: color-mix(in srgb, #229ed9 9%, #0a1823);
    --svc-surface-2: color-mix(in srgb, #229ed9 14%, #0a1823);
    --svc-border: color-mix(in srgb, #229ed9 22%, rgba(255, 255, 255, .08));
    --svc-text: #e6f2f9;
    --svc-muted: #94aebd;
    --svc-btn: linear-gradient(135deg,#229ed9 0%,#0b76ad 100%);
}
[data-theme="basic"] .svc-page[data-plat="shopee"] {
    --svc-acc: #ee4d2d;
    --svc-acc2: #ff9a56;
    --svc-base: #1d0e08;
    --svc-bg: color-mix(in srgb, #ee4d2d 6%, #1d0e08);
    --svc-surface: color-mix(in srgb, #ee4d2d 9%, #1d0e08);
    --svc-surface-2: color-mix(in srgb, #ee4d2d 14%, #1d0e08);
    --svc-border: color-mix(in srgb, #ee4d2d 22%, rgba(255, 255, 255, .08));
    --svc-text: #faece6;
    --svc-muted: #bda396;
    --svc-btn: linear-gradient(135deg,#ee4d2d 0%,#ff7a2f 100%);
}
[data-theme="basic"] .svc-page[data-plat="threads"] {
    --svc-acc: #a855f7;
    --svc-acc2: #ec4899;
    --svc-base: #120e1a;
    --svc-bg: color-mix(in srgb, #a855f7 6%, #120e1a);
    --svc-surface: color-mix(in srgb, #a855f7 9%, #120e1a);
    --svc-surface-2: color-mix(in srgb, #a855f7 14%, #120e1a);
    --svc-border: color-mix(in srgb, #a855f7 22%, rgba(255, 255, 255, .08));
    --svc-text: #eeeaf5;
    --svc-muted: #a79fb5;
    --svc-btn: linear-gradient(135deg,#a855f7 0%,#ec4899 100%);
}
[data-theme="basic"] .svc-page[data-plat="lazada"] {
    --svc-acc: #6a4cff;
    --svc-acc2: #ff4fa3;
    --svc-base: #110b2a;
    --svc-bg: color-mix(in srgb, #6a4cff 6%, #110b2a);
    --svc-surface: color-mix(in srgb, #6a4cff 9%, #110b2a);
    --svc-surface-2: color-mix(in srgb, #6a4cff 14%, #110b2a);
    --svc-border: color-mix(in srgb, #6a4cff 22%, rgba(255, 255, 255, .08));
    --svc-text: #ece8fa;
    --svc-muted: #a49fc4;
    --svc-btn: linear-gradient(135deg,#3b2bd6 0%,#8a4bea 55%,#f45d9e 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="instagram"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #0d0516 0%, #120a28 50%, #1a0e35 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="facebook"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #050b1a 0%, #081a3a 50%, #0c2a5c 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="tiktok"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #05070a 0%, #0b0d12 50%, #14101a 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="youtube"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #160505 0%, #240808 50%, #340c0c 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="twitter"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #04080d 0%, #07121c 50%, #0b2234 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="telegram"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #040b12 0%, #07161f 50%, #0a2433 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="shopee"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #170a05 0%, #271008 50%, #38160b 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="threads"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #08080c 0%, #100c18 50%, #190f26 100%);
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat="lazada"]) {
    background:
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(135deg, #07051a 0%, #0f0a2c 50%, #190f45 100%);
}
[data-theme="basic"] .svc-buy-dark .btn-primary.qb-submit { background: var(--svc-btn, linear-gradient(90deg, var(--svc-acc), var(--svc-acc2))); }
[data-theme="basic"] .svc-page[data-plat] .svc-buy-dark,
[data-theme="basic"] .svc-page[data-plat] .svc-trust-card { background: color-mix(in srgb, var(--svc-acc) 5%, transparent); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .14); }
[data-theme="basic"] .svc-page[data-plat] .form-control,
[data-theme="basic"] .svc-page[data-plat] .form-select { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }

/* ---------- Nen TOAN SITE theo nen tang (gradient + 3 orb mo) va 2 hop nen rieng — mo phong socialboost ---------- */
[data-theme="basic"] body:has(.svc-page[data-plat="instagram"]) { background: linear-gradient(145deg,#0d0516,#120a28 45%,#1a0e35 80%,#120a28) fixed; --svc-body-base: #0d0516; }
[data-theme="basic"] body:has(.svc-page[data-plat="instagram"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #e4405f70 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #fcaf4566 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #833ab444 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="facebook"]) { background: linear-gradient(145deg,#050b1a,#081a3a 45%,#0c2a5c 80%,#081a3a) fixed; --svc-body-base: #050b1a; }
[data-theme="basic"] body:has(.svc-page[data-plat="facebook"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #1877f270 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #42a5f566 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #0a5bd644 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="tiktok"]) { background: linear-gradient(145deg,#0a0a1a,#140822 40%,#0d1b3e 70%,#12122a) fixed; --svc-body-base: #0a0a1a; }
[data-theme="basic"] body:has(.svc-page[data-plat="tiktok"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #ff005070 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #00f2ea66 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #9c27b044 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="youtube"]) { background: linear-gradient(145deg,#140505,#240808 45%,#340c0c 80%,#1c0808) fixed; --svc-body-base: #140505; }
[data-theme="basic"] body:has(.svc-page[data-plat="youtube"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #ff000070 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #ff8a6566 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #b71c1c44 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="twitter"]) { background: linear-gradient(145deg,#04080d,#07121c 45%,#0b2234 80%,#07121c) fixed; --svc-body-base: #04080d; }
[data-theme="basic"] body:has(.svc-page[data-plat="twitter"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #1d9bf070 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #7dd3fc66 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #0b6fb844 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="telegram"]) { background: linear-gradient(145deg,#040b12,#07161f 45%,#0a2433 80%,#07161f) fixed; --svc-body-base: #040b12; }
[data-theme="basic"] body:has(.svc-page[data-plat="telegram"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #229ed970 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #5bc8f566 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #0b76ad44 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="shopee"]) { background: linear-gradient(145deg,#170a05,#271008 45%,#38160b 80%,#271008) fixed; --svc-body-base: #170a05; }
[data-theme="basic"] body:has(.svc-page[data-plat="shopee"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #ee4d2d70 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #ff9a5666 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #ff7a2f44 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="threads"]) { background: linear-gradient(145deg,#08080c,#100c18 45%,#190f26 80%,#100c18) fixed; --svc-body-base: #08080c; }
[data-theme="basic"] body:has(.svc-page[data-plat="threads"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #a855f770 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #ec489966 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #6d28d944 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] body:has(.svc-page[data-plat="lazada"]) { background: linear-gradient(145deg,#07051a,#0f0a2c 45%,#190f45 80%,#0f0a2c) fixed; --svc-body-base: #07051a; }
[data-theme="basic"] body:has(.svc-page[data-plat="lazada"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 100% 0%, #6a4cff70 0%, transparent 100%) 100% 0 / 1000px 1000px no-repeat,
        radial-gradient(closest-side circle at 0% 100%, #ff4fa366 0%, transparent 100%) 0 100% / 900px 900px no-repeat,
        radial-gradient(closest-side circle at 50% 50%, #3b2bd644 0%, transparent 100%) 60% 40% / 800px 800px no-repeat,
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px;
}
[data-theme="basic"] .page-content:has(.svc-page[data-plat]) { background: transparent !important; }
/* hop form: nen dac (base 94%) + bong lon; hop thong tin ben phai: nhat hon (base 70%) — 2 hop khac nen nhau nhu mau */
[data-theme="basic"] .svc-page[data-plat] .svc-buy-dark {
    background: color-mix(in srgb, var(--svc-base) 94%, transparent);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    backdrop-filter: none;
}
[data-theme="basic"] .svc-page[data-plat] .svc-trust-card {
    background: color-mix(in srgb, var(--svc-base) 70%, transparent);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: none;
    backdrop-filter: blur(8px);
}
[data-theme="basic"] .page-wrapper:has(.svc-page[data-plat]) { background: transparent !important; }

/* Hop form: nen trong suot nhe (de lo nen toan site) — !important de thang rule .card cu */
[data-theme="basic"] .svc-page[data-plat] .svc-buy-dark {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)) !important;
}
/* Cot phai: chi hop dong "stat + hoat dong gan day" moi la hop; tieu de/tag nam tren nen trang */
[data-theme="basic"] .svc-page[data-plat] .svc-trust-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
[data-theme="basic"] .svc-page[data-plat] .svc-trust-card > .card-body { padding-left: 4px; padding-right: 4px; }
[data-theme="basic"] .svc-page[data-plat] .svc-hero-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

/* Select native (so phut, quoc gia...): danh sach xo xuong nen toi, chu sang de doc */
[data-theme="basic"] .svc-page select,
[data-theme="basic"] .svc-page .form-select { color-scheme: dark; }
[data-theme="basic"] .svc-page select option,
[data-theme="basic"] .svc-page select optgroup {
    background-color: #161a26;
    color: #eef2f7;
}
[data-theme="basic"] .svc-page select option:checked,
[data-theme="basic"] .svc-page select option:hover {
    background-color: color-mix(in srgb, var(--svc-acc) 55%, #161a26);
    color: #fff;
}
[data-theme="basic"] .svc-page select option:disabled { color: #6b7385; }

/* Hop form co vien + vang sang theo mau nen tang (nhu mau); hop thong tin ben phai khong co bong */
[data-theme="basic"] .svc-page[data-plat] .svc-buy-dark {
    border-color: color-mix(in srgb, var(--svc-acc) 40%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--svc-acc) 12%, transparent),
        0 0 46px color-mix(in srgb, var(--svc-acc) 32%, transparent),
        inset 0 0 40px color-mix(in srgb, var(--svc-acc) 8%, transparent) !important;
}
[data-theme="basic"] .svc-page[data-plat] .svc-hero-box {
    box-shadow: none !important;
}

/* Select quoc gia dang dropdown (giong select server) + so server theo nhom */
[data-theme="basic"] .svc-buy-dark .svc-country { position: relative; }
[data-theme="basic"] .svc-buy-dark .svc-country-native {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
}
[data-theme="basic"] .svc-buy-dark .svc-country-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-theme="basic"] .svc-buy-dark .svc-country-count,
[data-theme="basic"] .svc-buy-dark .svc-country-opt em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--svc-acc) 22%, transparent);
    color: var(--svc-acc2);
}
[data-theme="basic"] .svc-buy-dark .svc-country.is-open .svc-server-trigger { border-color: var(--svc-acc); }
[data-theme="basic"] .svc-buy-dark .svc-country.is-open .svc-server-trigger svg { transform: rotate(180deg); }
[data-theme="basic"] .svc-buy-dark .svc-country-menu {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 190px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--svc-acc) 30%, var(--svc-border));
    background: var(--svc-surface);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}
[data-theme="basic"] .svc-buy-dark .svc-country.is-open .svc-country-menu { display: block; }
[data-theme="basic"] .svc-buy-dark .svc-country-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--svc-text);
    font-size: 14px;
    text-align: left;
    transition: background-color .15s ease;
}
[data-theme="basic"] .svc-buy-dark .svc-country-opt:hover { background: color-mix(in srgb, var(--svc-acc) 14%, transparent); }
[data-theme="basic"] .svc-buy-dark .svc-country-opt.is-active { background: color-mix(in srgb, var(--svc-acc) 24%, transparent); font-weight: 700; }
[data-theme="basic"] .svc-buy-dark .svc-country-opt:disabled { opacity: .4; cursor: not-allowed; }

/* Mobile: bang "Tien ich" dang luoi o (nut "...") thay cho sidebar */
[data-theme="basic"] .mob-tools-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 18, 32, .45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}
[data-theme="basic"] .mob-tools-backdrop.is-open { opacity: 1; visibility: visible; }
[data-theme="basic"] .mob-tools {
    position: fixed;
    z-index: 1100;
    top: 50%;
    left: 50%;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 18px 16px 18px;
    border-radius: 22px;
    background: #fff;
    color: #1b1f33;
    box-shadow: 0 30px 70px -20px rgba(20, 20, 60, .55);
    transform: translate(-50%, -46%) scale(.96);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s cubic-bezier(.22, .8, .24, 1), opacity .2s ease, visibility .2s;
}
[data-theme="basic"] .mob-tools.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
[data-theme="basic"] .mob-tools-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0 4px;
}
[data-theme="basic"] .mob-tools-head b { font-size: 20px; font-weight: 800; }
[data-theme="basic"] .mob-tools-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f2f8;
    color: #4a4f6a;
}
[data-theme="basic"] .mob-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-theme="basic"] .mob-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 14px 8px;
    border: 1px solid #eceef6;
    border-radius: 14px;
    background: #fff;
    color: #1b1f33;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 16px -10px rgba(40, 40, 100, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
[data-theme="basic"] .mob-tool:active { transform: scale(.97); }
[data-theme="basic"] .mob-tool span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e7edff;
    color: #3d5afe;
    font-size: 19px;
}
[data-theme="basic"] .mob-tool em { font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.25; }
[data-theme="basic"] .mob-tool.is-danger span { background: #ffe8ec; color: #e11d48; }
@media (min-width: 992px) {
    [data-theme="basic"] .mob-tools, [data-theme="basic"] .mob-tools-backdrop { display: none; }
}

/* Panel dich vu mobile: kieu app — 2 danh sach xep chong, chuyen cap bang transform + opacity (translateX(0) / opacity 1) */
[data-theme="basic"] .mob-svc-body { display: grid; overflow-x: hidden; }
[data-theme="basic"] .mob-svc-body > .mob-svc-list {
    grid-area: 1 / 1;
    min-width: 0;
    max-height: 4000px;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .42s cubic-bezier(.32, .72, 0, 1),
        opacity .3s ease,
        visibility 0s,
        max-height 0s;
    will-change: transform, opacity;
}
/* Dang o cap 1: danh sach dich vu cho san ben phai, an va thu chieu cao sau khi truot xong */
[data-theme="basic"] .mob-svc-body > .mob-svc-items {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        transform .42s cubic-bezier(.32, .72, 0, 1),
        opacity .3s ease,
        visibility 0s .42s,
        max-height 0s .42s;
}
/* Da vao nhom: danh sach nhom truot sang trai va mo dan, danh sach dich vu truot vao */
[data-theme="basic"] .mob-svc-body.is-sub > .mob-svc-groups,
[data-theme="basic"] .mob-svc-body.is-sub > #mobSvcGroups {
    transform: translateX(-32%);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        transform .42s cubic-bezier(.32, .72, 0, 1),
        opacity .3s ease,
        visibility 0s .42s,
        max-height 0s .42s;
}
[data-theme="basic"] .mob-svc-body.is-sub > .mob-svc-items {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    max-height: 4000px;
    overflow: visible;
    pointer-events: auto;
    transition:
        transform .42s cubic-bezier(.32, .72, 0, 1),
        opacity .3s ease,
        visibility 0s,
        max-height 0s;
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="basic"] .mob-svc-body > .mob-svc-list { transition: none !important; }
}


/* Bang "Tien ich" mobile: dang danh sach + nhom xo xuong (accordion muot), thay cho luoi o */
[data-theme="basic"] .mob-tools-list { display: flex; flex-direction: column; gap: 6px; }
[data-theme="basic"] .mob-acc { border-radius: 14px; background: #fff; transition: background-color .2s ease; }
[data-theme="basic"] .mob-acc.is-open { background: #f5f6fd; }
[data-theme="basic"] .mob-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #1b1f33;
    text-align: left;
    text-decoration: none;
    transition: background-color .15s ease;
}
[data-theme="basic"] .mob-acc-head:hover, [data-theme="basic"] .mob-acc-head:active { background: #f1f2fb; }
[data-theme="basic"] .mob-acc-head b { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
[data-theme="basic"] .mob-acc-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #e7edff;
    color: #3d5afe;
    font-size: 18px;
}
[data-theme="basic"] .mob-acc-ico svg { width: 18px; height: 18px; }
[data-theme="basic"] .mob-acc-chev { font-size: 12px; color: #8a90a8; transition: transform .32s cubic-bezier(.32, .72, 0, 1); }
[data-theme="basic"] .mob-acc.is-open .mob-acc-chev { transform: rotate(180deg); }
/* mo/dong muot bang grid-template-rows 0fr -> 1fr + opacity/translate */
[data-theme="basic"] .mob-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition: grid-template-rows .36s cubic-bezier(.32, .72, 0, 1), opacity .28s ease, transform .36s cubic-bezier(.32, .72, 0, 1);
}
[data-theme="basic"] .mob-acc.is-open .mob-acc-panel { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
[data-theme="basic"] .mob-acc-inner { min-height: 0; overflow: hidden; padding: 0 8px; }
[data-theme="basic"] .mob-acc.is-open .mob-acc-inner { padding-bottom: 8px; }
[data-theme="basic"] .mob-acc-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 11px;
    color: #2b3050;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
[data-theme="basic"] .mob-acc-sub:active, [data-theme="basic"] .mob-acc-sub:hover { background: #e9ebfa; }
[data-theme="basic"] .mob-acc-sub .mob-acc-ico { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
    [data-theme="basic"] .mob-acc-panel, [data-theme="basic"] .mob-acc-chev { transition: none; }
}

/* Mobile: logo tren header (ben canh nut menu) */
[data-theme="basic"] .hdr-logo-m { display: flex; align-items: center; min-width: 0; margin: 0 4px 0 3px; flex: 0 1 auto; }
[data-theme="basic"] .hdr-logo-m a { display: flex; align-items: center; min-width: 0; }
[data-theme="basic"] .hdr-logo-m img { width: auto; height: auto; max-width: 125px; max-height: 45px; object-fit: contain; }
@media (max-width: 575.98px) {
    /* thu gon khoang cach de logo du cho: avatar tron, ma ngon ngu khong mui ten */
    [data-theme="basic"] .topbar-custom .modern-user-pill .modern-user-summary,
    [data-theme="basic"] .topbar-custom .modern-user-pill .modern-pill-caret,
    [data-theme="basic"] .topbar-custom .modern-pill .modern-pill-caret { display: none !important; }
    [data-theme="basic"] .topbar-custom .modern-user-pill img { margin-right: 0 !important; }
    [data-theme="basic"] .topbar-custom .topbar-item.me-2,
    [data-theme="basic"] .topbar-custom .modern-pill.me-2 { margin-right: 4px !important; }
    [data-theme="basic"] .topbar-custom .topbar-item.ms-1 { margin-left: 4px !important; }
    [data-theme="basic"] .topbar-custom .modern-pill { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 575.98px) {
    [data-theme="basic"] .topbar-custom > .topbar-item:last-child > li { flex-shrink: 0; }
    [data-theme="basic"] .topbar-custom .modern-user-pill { min-width: 42px; padding: 5px 6px; justify-content: center; }
    [data-theme="basic"] .topbar-custom .modern-user-pill img { flex: none; width: 30px; height: 30px; }
}

/* Logo header mobile: trang thuong dung logo sang, trang dich vu (header toi) dung logo_dark */
[data-theme="basic"] .hdr-logo-m .hdr-logo-dark { display: none; }
[data-theme="basic"] body:has(.svc-page) .hdr-logo-m .hdr-logo-light { display: none; }
[data-theme="basic"] body:has(.svc-page) .hdr-logo-m .hdr-logo-dark { display: block; }

/* Menu user (mobile): doi ngon ngu xo xuong ngay trong menu */
[data-theme="basic"] .mob-lang { margin: 4px 8px 6px; border-radius: 12px; background: rgba(120, 130, 170, .1); }
[data-theme="basic"] .mob-lang-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
[data-theme="basic"] .mob-lang-head span { flex: 1; }
[data-theme="basic"] .mob-lang-head em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(109, 95, 250, .16);
    color: #6d5ffa;
}
[data-theme="basic"] .mob-lang-chev { font-size: 11px; opacity: .6; transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
[data-theme="basic"] .mob-lang.is-open .mob-lang-chev { transform: rotate(180deg); }
[data-theme="basic"] .mob-lang-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .32s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
}
[data-theme="basic"] .mob-lang.is-open .mob-lang-panel { grid-template-rows: 1fr; opacity: 1; }
[data-theme="basic"] .mob-lang-inner { min-height: 0; overflow: hidden; }
[data-theme="basic"] .mob-lang.is-open .mob-lang-inner { max-height: 220px; overflow-y: auto; padding-bottom: 6px; }
[data-theme="basic"] .mob-lang-inner .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 9px; }

/* Header mobile: ul trai co gian (logo thu nho theo cho trong), ul phai khong bi ep => khong tran */
@media (max-width: 991.98px) {
    [data-theme="basic"] .topbar-custom > .topbar-item:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
    [data-theme="basic"] .topbar-custom > .topbar-item:last-child { flex: 0 0 auto; }
    [data-theme="basic"] .topbar-custom .hdr-logo-m { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    [data-theme="basic"] .topbar-custom .hdr-logo-m a { min-width: 0; max-width: 100%; }
    [data-theme="basic"] .topbar-custom .hdr-logo-m img { max-width: 100%; min-width: 0; }
}

/* Mobile: topbar khong duoc keo ra ngoai man hinh (rule cu dung margin am -15px / width +15px) */
@media (max-width: 991.98px) {
    [data-theme="basic"] .topbar.d-print-none {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Mobile, khach chua dang nhap: nut Dang nhap/Dang ky gon lai de logo con cho; ngon ngu nam trong bang Tien ich */
[data-theme="basic"] .mob-lang--guest { margin: 0 0 10px; background: #f1f2fb; }
[data-theme="basic"] .mob-lang--guest .mob-lang-inner .dropdown-item { color: #1b1f33; }
@media (max-width: 575.98px) {
    [data-theme="basic"] .topbar-custom .hdr-btn { height: 36px; padding: 0 10px; font-size: 13px; }
    [data-theme="basic"] .topbar-custom .hdr-btn.me-1 { margin-right: 4px !important; }
}
[data-theme="basic"] .mob-guest-login { margin: 0 0 8px; }
@media (max-width: 575.98px) {
    /* khach: chi giu nut Dang ky tren header, Dang nhap nam trong bang Tien ich */
    [data-theme="basic"] .topbar-custom .hdr-btn-ghost { display: none !important; }
}
@media (min-width: 576px) {
    [data-theme="basic"] .mob-guest-login { display: none; }
}

/* Panel "Dich vu" tren mobile: rong het man hinh (chua le 8px 2 ben) */
@media (max-width: 991.98px) {
    [data-theme="basic"] .mob-svc {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}
@media (max-width: 991.98px) {
    /* Panel Dich vu cao het man hinh (tu duoi header den sat day) */
    [data-theme="basic"] .mob-svc {
        top: 70px;
        bottom: 8px;
        height: auto;
        max-height: none;
    }
    [data-theme="basic"] .mob-svc-body { align-content: start; }
}

/* Header mobile: khoang cach giua cac nut thu nho */
@media (max-width: 991.98px) {
    [data-theme="basic"] .topbar-custom > .topbar-item { gap: 5px; }
    [data-theme="basic"] .topbar-custom .topbar-item.me-2,
    [data-theme="basic"] .topbar-custom .modern-pill.me-2 { margin-right: 0 !important; }
    [data-theme="basic"] .topbar-custom .topbar-item.ms-1 { margin-left: 0 !important; }
}

/* Khung chat CSKH phai nam TREN header (header sticky z-index 1002) de nut dong khong bi che */
[data-theme="basic"] #ai-chat-widget { z-index: 1010 !important; }