/* =============================================================
       CHILD-DOMAIN V2
       Scope: .cd-v2 only, không leak ra trang khác.
       ============================================================= */
.cd-v2{
    --cd-blue:#2f6bff;
    --cd-blue-dark:#2154d8;
    --cd-bg:#f4f5f8;
    --cd-card:#ffffff;
    --cd-border:#e6e8ee;
    --cd-border-soft:#eef0f4;
    --cd-text:#1f2a44;
    --cd-text-2:#5b6677;
    --cd-text-3:#8a93a3;
    --cd-green:#16a34a; --cd-green-bg:#e7f6ec;
    --cd-orange:#e8810f; --cd-orange-bg:#fdf0dd;
    --cd-red:#e0463b;   --cd-red-bg:#fde9e7;
    --cd-yellow:#caa008;--cd-yellow-bg:#fbf3d2;
    font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
    color:var(--cd-text);
    font-size:13px;
    padding:6px 0 24px;
}
.cd-v2 *{box-sizing:border-box}

/* card cơ sở */
.cd-v2 .cd-card{background:var(--cd-card);border:1px solid var(--cd-border);border-radius:14px}
.cd-v2 .cd-card-title{font-size:16px;font-weight:700;color:var(--cd-text)}
.cd-v2 .cd-meta{font-size:11.5px;color:var(--cd-text-3);margin-top:8px}
.cd-v2 .cd-field-label{font-size:12.5px;font-weight:600;color:var(--cd-text);margin-bottom:8px;display:block}
.cd-v2 .cd-hint{font-size:11px;color:var(--cd-text-3);margin-top:8px}

/* layout 60 / 40 — desktop: 2 card cao bằng nhau (stretch) */
.cd-v2 .cd-layout{display:flex;gap:20px;align-items:stretch;margin-bottom:20px;flex-wrap:wrap}
.cd-v2 .cd-api-card{flex:3;min-width:380px;display:flex;flex-direction:column;padding:22px 24px 24px}
.cd-v2 .cd-col-right{flex:2;min-width:280px;display:flex;flex-direction:column;gap:20px}
.cd-v2 .cd-help-card{flex:1;display:flex;flex-direction:column;padding:22px}

/* token block */
.cd-v2 .cd-api-head{padding-bottom:18px;border-bottom:1px solid var(--cd-border-soft);margin-top:18px}
.cd-v2 .cd-token-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cd-v2 .cd-input{
    border:1px solid var(--cd-border);border-radius:9px;
    padding:9px 12px;font-size:12.5px;color:var(--cd-text);
    background:#fff;height:38px;display:flex;align-items:center;
}
.cd-v2 .cd-token-input{
    flex:1;min-width:200px;justify-content:space-between;
    font-family:'SF Mono',Menlo,monospace;letter-spacing:.5px;color:var(--cd-text-2);
    overflow:hidden;
}
.cd-v2 .cd-token-input .cd-token-val{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cd-v2 .cd-token-input .cd-eye{color:var(--cd-text-3);cursor:pointer;flex-shrink:0;margin-left:8px}

/* buttons */
.cd-v2 .cd-btn{
    display:inline-flex;align-items:center;gap:7px;justify-content:center;
    border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;
    border:1px solid transparent;padding:9px 14px;height:38px;white-space:nowrap;
    background:#fff;color:var(--cd-text-2);transition:.14s;font-family:inherit;
}
.cd-v2 .cd-btn-light{background:#fff;border-color:var(--cd-border);color:var(--cd-text-2)}
.cd-v2 .cd-btn-light:hover{background:#f7f8fa}
.cd-v2 .cd-btn-primary{background:var(--cd-blue);color:#fff;border-color:var(--cd-blue)}
.cd-v2 .cd-btn-primary:hover{background:var(--cd-blue-dark);border-color:var(--cd-blue-dark)}
.cd-v2 .cd-btn:disabled{opacity:.55;cursor:not-allowed}

/* tabs */
.cd-v2 .cd-tabs{display:flex;gap:22px;border-bottom:1px solid var(--cd-border-soft);margin-top:8px;flex-wrap:wrap}
.cd-v2 .cd-tab{
    padding:13px 2px;font-size:13px;color:var(--cd-text-3);
    cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
    display:flex;align-items:center;gap:7px;background:transparent;border-top:none;border-left:none;border-right:none;
    font-family:inherit;
}
.cd-v2 .cd-tab:hover{color:var(--cd-text)}
.cd-v2 .cd-tab.active{color:var(--cd-blue);font-weight:700;border-bottom-color:var(--cd-blue)}
/* External link tab (Postman) — KHÔNG có active state, KHÔNG có underline
   (override anchor default text-decoration + visited/focus states) */
.cd-v2 a.cd-tab-ext,
.cd-v2 a.cd-tab-ext:link,
.cd-v2 a.cd-tab-ext:visited,
.cd-v2 a.cd-tab-ext:hover,
.cd-v2 a.cd-tab-ext:focus,
.cd-v2 a.cd-tab-ext:active{
    text-decoration:none !important;
    border-bottom-color:transparent !important;
    outline:none;
    color:var(--cd-text-3);
}
.cd-v2 a.cd-tab-ext:hover{color:var(--cd-blue) !important}
.cd-v2 .cd-panels{margin-top:18px}
.cd-v2 .cd-tab-panel{display:none}
.cd-v2 .cd-tab-panel.active{display:block}

/* features list trong step 1 */
.cd-v2 .cd-create-info{margin-top:20px;border:1px solid var(--cd-border-soft);border-radius:11px;padding:15px 16px;background:#fafbfc}
.cd-v2 .cd-ci-title{font-size:12.5px;font-weight:700;margin-bottom:12px}
.cd-v2 .cd-ci-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.cd-v2 .cd-ci-item{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--cd-text-2)}

/* chặn tạo web khi chưa xác nhận Email (views/panel/domain.ejs) */
.cd-v2 .cd-email-gate{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:var(--cd-orange-bg);border:1px solid var(--cd-orange);
    border-radius:11px;padding:12px 14px;margin-bottom:16px;
}
.cd-v2 .cd-eg-ico{color:var(--cd-orange);font-size:16px;display:flex;flex-shrink:0}
.cd-v2 .cd-eg-text{flex:1;min-width:210px;font-size:12px;color:var(--cd-text);line-height:1.65}
.cd-v2 .cd-ci-item .cd-ck{
    width:19px;height:19px;border-radius:50%;background:var(--cd-green-bg);color:var(--cd-green);
    display:flex;align-items:center;justify-content:center;flex:0 0 19px;
}

/* stepper */
.cd-v2 .cd-stepper{
    display:flex;align-items:center;margin:10px 0 26px;
    flex-wrap: wrap;
}
.cd-v2 .cd-step{display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 13px 6px 6px;border-radius:40px}
.cd-v2 .cd-step:hover .cd-st-t{color:var(--cd-text)}
.cd-v2 .cd-step.active{background:#eaf1ff}
.cd-v2 .cd-step .cd-num{
    width:30px;height:30px;border-radius:50%;flex:0 0 30px;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;
    background:#fff;border:1.5px solid var(--cd-border);color:var(--cd-text-3);
}
.cd-v2 .cd-step.active .cd-num{background:var(--cd-blue);border-color:var(--cd-blue);color:#fff;box-shadow:0 0 0 4px #d4e2ff}
.cd-v2 .cd-step.done .cd-num{background:var(--cd-green);border-color:var(--cd-green);color:#fff}
.cd-v2 .cd-step .cd-st-t{font-size:12.5px;font-weight:600;color:var(--cd-text-3);white-space:nowrap}
.cd-v2 .cd-step.active .cd-st-t{color:var(--cd-blue)}
.cd-v2 .cd-step.done .cd-st-t{color:var(--cd-text)}
.cd-v2 .cd-step-line{flex:1;height:3px;background:var(--cd-border);border-radius:3px;margin:0 6px;min-width:24px}
.cd-v2 .cd-step-line.current{background:linear-gradient(90deg,var(--cd-blue),var(--cd-border))}
.cd-v2 .cd-step-line.done{background:var(--cd-green)}
.cd-v2 .cd-step .cd-num-ck{display:none}
.cd-v2 .cd-step.done .cd-num-n{display:none}
.cd-v2 .cd-step.done .cd-num-ck{display:block}

/* substeps */
.cd-v2 .cd-substep{display:none}
.cd-v2 .cd-substep.active{display:block}
.cd-v2 .cd-substep-head{font-size:13px;font-weight:700;margin-bottom:4px}
.cd-v2 .cd-substep-sub{font-size:12px;color:var(--cd-text-3);margin-bottom:16px}

/* form fields */
.cd-v2 .cd-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.cd-v2 .cd-form-field .cd-fl{font-size:12px;font-weight:600;margin-bottom:6px;color:var(--cd-text)}
.cd-v2 .cd-form-field .cd-fi{
    width:100%;border:1px solid var(--cd-border);border-radius:9px;
    height:40px;padding:0 12px;font-size:12.5px;color:var(--cd-text);background:#fff;
    font-family:inherit;
}
.cd-v2 .cd-form-field .cd-fi:disabled{background:#fafbfc;color:var(--cd-text-3);cursor:not-allowed}
.cd-v2 .cd-form-field .cd-fi::placeholder{color:var(--cd-text-3)}
.cd-v2 .cd-form-field .cd-fi:focus{outline:none;border-color:var(--cd-blue);box-shadow:0 0 0 3px #e8effe}

/* domain row (step 1) */
.cd-v2 .cd-domain-row{display:flex}
.cd-v2 .cd-domain-input{
    flex:1;border:1px solid var(--cd-border);border-radius:9px;
    padding:0 12px;height:40px;font-size:12.5px;font-family:inherit;color:var(--cd-text);
}
.cd-v2 .cd-domain-input::placeholder{color:var(--cd-text-3)}
.cd-v2 .cd-domain-input:focus{outline:none;border-color:var(--cd-blue);box-shadow:0 0 0 3px #e8effe}

/* nameserver rows (step 3) */
.cd-v2 .cd-ns-intro{font-size:12.5px;color:var(--cd-text-2);line-height:1.65;margin-bottom:14px}
.cd-v2 .cd-ns-row{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--cd-border);border-radius:10px;
    padding:11px 14px;margin-bottom:10px;
}
.cd-v2 .cd-ns-row .cd-ns-tag{
    font-size:11px;font-weight:700;color:var(--cd-blue);background:#eef3ff;
    padding:4px 10px;border-radius:6px;flex:0 0 auto;
}
.cd-v2 .cd-ns-row .cd-ns-val{flex:1;min-width:0;font-family:'SF Mono',Menlo,monospace;font-size:12.5px;color:var(--cd-text);word-break:break-all}
.cd-v2 .cd-ns-row .cd-ns-cp{color:var(--cd-text-3);cursor:pointer;display:flex;flex-shrink:0}
.cd-v2 .cd-ns-row .cd-ns-cp:hover{color:var(--cd-blue)}
.cd-v2 .cd-ns-status{
    display:flex;align-items:center;gap:9px;margin-top:14px;
    background:var(--cd-orange-bg);color:var(--cd-orange);
    padding:11px 14px;border-radius:10px;font-size:12px;font-weight:600;
}
.cd-v2 .cd-ns-status.ok{background:var(--cd-green-bg);color:var(--cd-green)}
.cd-v2 .cd-ns-status.err{background:var(--cd-red-bg);color:var(--cd-red)}
.cd-v2 .cd-ns-note{font-size:11.5px;color:var(--cd-text-3);margin-top:11px;line-height:1.65}
.cd-v2 .cd-spin{animation:cdv2-spin 1.3s linear infinite;display:inline-flex}
@keyframes cdv2-spin{to{transform:rotate(360deg)}}

/* done screen (step 4) */
.cd-v2 .cd-done-screen{text-align:center;padding:14px 0 6px}
.cd-v2 .cd-done-ic{width:64px;height:64px;border-radius:50%;background:var(--cd-green-bg);color:var(--cd-green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cd-v2 .cd-done-title{font-size:17px;font-weight:800;margin-bottom:6px}
.cd-v2 .cd-done-sub{font-size:12.5px;color:var(--cd-text-2);margin-bottom:18px}
.cd-v2 .cd-done-summary{border:1px solid var(--cd-border-soft);border-radius:11px;max-width:420px;margin:0 auto;text-align:left;overflow:hidden}
.cd-v2 .cd-ds-row{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;font-size:12.5px;border-bottom:1px solid var(--cd-border-soft)}
.cd-v2 .cd-ds-row:last-child{border-bottom:none}
.cd-v2 .cd-ds-k{color:var(--cd-text-3)}
.cd-v2 .cd-ds-v{font-weight:600;color:var(--cd-text)}

.cd-v2 .cd-create-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--cd-border-soft)}

/* doc panel */
.cd-v2 .cd-doc{display:flex;gap:24px;flex-wrap:wrap}
.cd-v2 .cd-doc-nav{flex:0 0 186px;display:flex;flex-direction:column;gap:2px;align-self:flex-start;position:sticky;top:78px}
.cd-v2 .cd-doc-nav .cd-di{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:12.5px;color:var(--cd-text-2);cursor:pointer}
.cd-v2 .cd-doc-nav .cd-di:hover{background:#f6f7f9}
.cd-v2 .cd-doc-nav .cd-di.active{background:#eef3ff;color:var(--cd-blue);font-weight:600}
.cd-v2 .cd-doc-body{flex:1;min-width:0}
.cd-v2 .cd-doc-body h3{font-size:14px;font-weight:700;margin:18px 0 7px;scroll-margin-top:80px;color:var(--cd-text)}
.cd-v2 .cd-doc-body h3:first-child{margin-top:0}
.cd-v2 .cd-doc-body h4{font-size:12.5px;font-weight:700;margin:12px 0 7px;color:var(--cd-text)}
.cd-v2 .cd-doc-body p{font-size:12.5px;color:var(--cd-text-2);line-height:1.65;margin-bottom:10px}
.cd-v2 .cd-url-box{
    border:1px solid var(--cd-border);border-radius:9px;
    padding:10px 12px;font-family:'SF Mono',Menlo,monospace;font-size:12px;
    color:var(--cd-text-2);display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;background:#fff;
}
.cd-v2 .cd-code-box{
    background:#0f1b33;border-radius:9px;padding:13px 14px;
    font-family:'SF Mono',Menlo,monospace;font-size:11.5px;color:#cdd6e5;
    line-height:1.7;position:relative;white-space:pre;overflow-x:auto;margin-bottom:12px;
}
.cd-v2 .cd-cp{color:var(--cd-text-3);cursor:pointer;display:inline-flex}
.cd-v2 .cd-cp:hover{color:var(--cd-blue)}
.cd-v2 .cd-doc-table{width:100%;border-collapse:collapse;margin-bottom:12px}
.cd-v2 .cd-doc-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--cd-text-3);padding:8px 10px;background:#fafbfc;border:1px solid var(--cd-border-soft);font-weight:700}
.cd-v2 .cd-doc-table td{font-size:12px;padding:8px 10px;border:1px solid var(--cd-border-soft);color:var(--cd-text-2);vertical-align:top}
.cd-v2 .cd-method{font-family:'SF Mono',Menlo,monospace;font-weight:700;font-size:10.5px;padding:2px 7px;border-radius:5px;display:inline-block}
.cd-v2 .cd-method.get{background:#e7f1ff;color:var(--cd-blue)}
.cd-v2 .cd-method.post{background:var(--cd-green-bg);color:var(--cd-green)}
.cd-v2 .cd-ci{font-family:'SF Mono',Menlo,monospace;background:#f1f3f6;padding:1px 5px;border-radius:4px;font-size:11px;color:#3a4456}

/* help card */
.cd-v2 .cd-help-body{display:flex;flex-direction:column;flex:1;margin-top:16px;gap:0}
.cd-v2 .cd-acc-item{
    border:1px solid var(--cd-border);border-radius:10px;
    padding:12px 14px;display:flex;align-items:center;gap:10px;
    font-size:12.5px;color:var(--cd-text);margin-bottom:9px;cursor:pointer;background:#fff;
}
.cd-v2 .cd-acc-item:hover{background:#fafbfc}
.cd-v2 .cd-acc-item.open{background:#f5f8ff;border-color:#d4e1ff}
.cd-v2 .cd-acc-item .cd-gap{flex:1}
.cd-v2 .cd-acc-item .cd-ic{color:var(--cd-text-2);display:flex}
.cd-v2 .cd-acc-item.open .cd-ic{color:var(--cd-blue)}
.cd-v2 .cd-acc-body{display:none;border:1px solid var(--cd-border-soft);border-radius:10px;padding:12px 14px;background:#fafbfc;margin-bottom:9px;margin-top:-5px;font-size:12px;color:var(--cd-text-2);line-height:1.65}
.cd-v2 .cd-acc-body.show{display:block}
.cd-v2 .cd-acc-body a{color:var(--cd-blue);font-weight:600;text-decoration:none}
.cd-v2 .cd-acc-body a:hover{text-decoration:underline}
.cd-v2 .cd-acc-body ol{padding-left:18px;margin:4px 0}
.cd-v2 .cd-acc-body li{margin:4px 0}

.cd-v2 .cd-help-cta{
    background:#eef3ff;border:1px solid #d9e4ff;border-radius:11px;
    padding:14px;display:flex;align-items:center;gap:11px;margin-top:auto;flex-wrap:wrap;
}
.cd-v2 .cd-help-cta .cd-ic{width:34px;height:34px;border-radius:9px;background:#dbe6ff;display:flex;align-items:center;justify-content:center;color:var(--cd-blue);flex:0 0 34px}
.cd-v2 .cd-help-cta .cd-ct-t{font-size:12.5px;font-weight:700}
.cd-v2 .cd-help-cta .cd-ct-d{font-size:10.5px;color:var(--cd-text-2);margin-top:2px}
.cd-v2 .cd-help-cta .cd-btn{height:32px;padding:0 12px;font-size:11.5px}

/* table */
.cd-v2 .cd-table-card{padding:20px 24px 18px}
/*.cd-v2 .cd-table-wrap{overflow-x:auto}*/
.cd-v2 #datatable-domains{width:100% !important;border-collapse:collapse}
.cd-v2 #datatable-domains thead th{
    text-align:left;font-size:11px;font-weight:700;color:var(--cd-text-3);
    text-transform:uppercase;letter-spacing:.4px;padding:11px 12px;
    border-bottom:1px solid var(--cd-border);background:#fafbfc;
}
.cd-v2 #datatable-domains tbody td{
    padding:13px 12px;font-size:12.5px;border-bottom:1px solid var(--cd-border-soft);
    color:var(--cd-text-2);
}
.cd-v2 #datatable-domains tbody tr:hover{background:#fafbfd}
.cd-v2 .cd-domain-cell{display:inline-flex;align-items:center;gap:7px;color:var(--cd-blue);font-weight:600}
.cd-v2 .cd-ab-pill{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:6px;display:inline-block}
.cd-v2 .cd-ab-pill.on{background:var(--cd-green-bg);color:var(--cd-green)}
.cd-v2 .cd-ab-pill.off{background:var(--cd-border-soft);color:var(--cd-text-3)}

/* =============================================================
   RESPONSIVE — 3 tier: 1024 (tablet) / 720 (mobile) / 480 (small)
   Tiêu chí: ưu tiên hiển thị ĐẦY ĐỦ thông tin (stack dọc thay vì
   ép ngang), không ẩn nội dung quan trọng, touch target ≥40px.
   ============================================================= */

/* ===== TABLET (<=1024px): 60/40 → stack, doc nav → chip ngang ===== */
@media(max-width:1024px){
    .cd-v2 .cd-layout{flex-direction:column;gap:18px}
    .cd-v2 .cd-api-card,.cd-v2 .cd-col-right{flex:1 1 auto;width:100%}
    .cd-v2 .cd-doc{flex-direction:column;gap:14px}
    .cd-v2 .cd-doc-nav{
        position:static;flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;
        overflow-x:auto;-webkit-overflow-scrolling:touch;
        gap:6px;padding-bottom:6px;margin:0 -4px 4px;
        scrollbar-width:thin;
    }
    .cd-v2 .cd-doc-nav .cd-di{flex:0 0 auto;white-space:nowrap}
}

/* ===== MOBILE (<=720px): token stack, tabs scroll, stepper scroll ===== */
@media(max-width:720px){
    .cd-v2{padding:4px 0 16px}
    .cd-v2 .cd-api-card{padding:20px 18px}
    .cd-v2 .cd-help-card{padding:20px 18px}
    .cd-v2 .cd-table-card{padding:18px 14px}
    .cd-v2 .cd-card-title{font-size:15px}

    /* Token row: input full width, 2 button cùng hàng phía dưới */
    .cd-v2 .cd-token-row{flex-wrap:wrap;gap:8px}
    .cd-v2 .cd-token-input{flex:1 1 100%;min-width:0}
    .cd-v2 .cd-token-row .cd-btn{flex:1 1 calc(50% - 4px);min-width:0}

    /* Tabs row: cuộn ngang giữ 3 mục cạnh nhau nếu chật */
    .cd-v2 .cd-tabs{gap:14px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .cd-v2 .cd-tabs::-webkit-scrollbar{display:none}
    .cd-v2 .cd-tab{flex:0 0 auto;font-size:12.5px;padding:11px 2px;white-space:nowrap}

    /* Stepper: cuộn ngang, MỌI step hiện tên để khách hình dung các bước */
    .cd-v2 .cd-stepper{
        overflow-x:auto;-webkit-overflow-scrolling:touch;
        padding-bottom:6px;margin-bottom:20px;
        scrollbar-width:thin;flex-wrap:nowrap;
    }
    .cd-v2 .cd-stepper::-webkit-scrollbar{height:4px}
    .cd-v2 .cd-stepper::-webkit-scrollbar-thumb{background:#d6d9de;border-radius:4px}
    .cd-v2 .cd-step{flex:0 0 auto}
    .cd-v2 .cd-step .cd-st-t{font-size:11.5px;display:inline}
    .cd-v2 .cd-step-line{min-width:20px;flex:0 0 28px}

    /* Step 1 features: 1 cột, padding nhỏ */
    .cd-v2 .cd-ci-grid{grid-template-columns:1fr;gap:8px 0}
    .cd-v2 .cd-create-info{padding:14px}

    /* Step 2 form: 1 cột — input full để khách thấy rõ */
    .cd-v2 .cd-form-grid{grid-template-columns:1fr;gap:12px}
    .cd-v2 .cd-form-field .cd-fi{height:42px;font-size:13px}
    .cd-v2 .cd-domain-input{height:42px;font-size:13px}

    /* Step 3 NS rows: label trên + value dưới — không bị chen */
    .cd-v2 .cd-ns-row{flex-wrap:wrap;row-gap:6px;padding:11px 12px}
    .cd-v2 .cd-ns-row .cd-ns-tag{flex:0 0 auto}
    .cd-v2 .cd-ns-row .cd-ns-val{flex:1 1 calc(100% - 40px);min-width:0;font-size:12px}

    /* Step 4 done summary: full width */
    .cd-v2 .cd-done-summary{max-width:100%}
    .cd-v2 .cd-ds-row{padding:10px 12px;font-size:12px}

    /* Action bar wizard: 2 button full hàng, cao 44px touch-friendly */
    .cd-v2 .cd-create-actions{flex-direction:row;gap:8px}
    .cd-v2 .cd-create-actions .cd-btn{flex:1;height:44px;font-size:13px}

    /* Help card: accordion item touch-friendly */
    .cd-v2 .cd-acc-item{padding:13px 14px;font-size:13px;min-height:44px}
    .cd-v2 .cd-acc-body{font-size:12.5px;padding:14px}
    .cd-v2 .cd-help-cta{flex-direction:column;align-items:stretch;text-align:center;gap:10px}
    .cd-v2 .cd-help-cta .cd-ic{margin:0 auto}
    .cd-v2 .cd-help-cta .cd-btn{width:100%;height:40px;font-size:12.5px}

    /* Table: cuộn ngang để giữ đủ cột — KHÔNG ẩn cột */
    .cd-v2 .cd-table-wrap{margin:0 -14px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .cd-v2 #datatable-domains{min-width:760px}
    .cd-v2 #datatable-domains thead th,
    .cd-v2 #datatable-domains tbody td{padding:10px 10px;font-size:12px}

    /* Doc body: code box font nhỏ + cuộn */
    .cd-v2 .cd-code-box{font-size:11px;padding:12px}
    .cd-v2 .cd-url-box{font-size:11.5px}
    .cd-v2 .cd-doc-table th,.cd-v2 .cd-doc-table td{font-size:11.5px;padding:7px 8px}

    /* Banner cảnh báo password: padding gọn, vẫn đủ đọc */
    .cd-v2 .cd-substep [style*="cd-orange-bg"]{padding:10px 12px;gap:8px}
}

/* =============================================================
   DARK MODE — kích hoạt khi body có class .dark_mode
   (toggle Dark Mode user-level, hoặc admin theme modern_auto/Tối)
   Ghi đè biến màu + 1 vài selector có hardcode color sáng.
   ============================================================= */
body.dark_mode .cd-v2{
    /* Palette navy ĐỒNG BỘ với sidebar modern — card bg = sb-bg để khớp tone tuyệt đối.
       Mọi token text/border/accent đều mirror --sb-* */
    --cd-card:#101a2d;                      /* = sb-bg — match sidebar tone */
    --cd-border:rgba(255,255,255,.07);      /* = sb-line */
    --cd-border-soft:rgba(255,255,255,.04);
    --cd-text:#c3ccdb;                      /* = sb-text */
    --cd-text-2:#8b94a9;                    /* = sb-icon */
    --cd-text-3:#5a6379;                    /* = sb-dim */
    --cd-blue:#60a5fa;                      /* blue-400 cho text contrast trên navy */
    --cd-blue-dark:#3b82f6;                 /* = sb-accent — nút primary */
    --cd-green:#4ade80;     --cd-green-bg:rgba(74,222,128,.14);
    --cd-orange:#fb923c;    --cd-orange-bg:rgba(251,146,60,.14);
    --cd-red:#f87171;       --cd-red-bg:rgba(248,113,113,.14);
    --cd-yellow:#fbbf24;    --cd-yellow-bg:rgba(251,191,36,.14);
}
/* Page bg trong dark mode: navy đậm hơn cards 1 chút để cards có "lift" subtle */
body.dark_mode .cd-v2{background:transparent}

/* Input + token + form: nền tối, viền dim */
body.dark_mode .cd-v2 .cd-input,
body.dark_mode .cd-v2 .cd-fi,
body.dark_mode .cd-v2 .cd-domain-input,
body.dark_mode .cd-v2 .cd-url-box{
    background:rgba(255,255,255,.03);
    color:var(--cd-text);
    border-color:var(--cd-border);
}
body.dark_mode .cd-v2 .cd-fi:disabled{background:rgba(255,255,255,.015);color:var(--cd-text-3)}
body.dark_mode .cd-v2 .cd-fi:focus,
body.dark_mode .cd-v2 .cd-domain-input:focus{
    border-color:var(--cd-blue);
    box-shadow:0 0 0 3px rgba(96,165,250,.20);
}
body.dark_mode .cd-v2 .cd-token-val{color:var(--cd-text-2)}

/* Buttons: btn-light → dark variant */
body.dark_mode .cd-v2 .cd-btn-light{
    background:rgba(255,255,255,.04);
    border-color:var(--cd-border);
    color:var(--cd-text);
}
body.dark_mode .cd-v2 .cd-btn-light:hover{background:rgba(255,255,255,.08)}

/* Tabs underline (active) */
body.dark_mode .cd-v2 .cd-tabs{border-bottom-color:var(--cd-border)}
body.dark_mode .cd-v2 .cd-tab:hover{color:var(--cd-text)}

/* Stepper: active pill xanh nhạt + glow */
body.dark_mode .cd-v2 .cd-step.active{background:rgba(96,165,250,.14)}
body.dark_mode .cd-v2 .cd-step .cd-num{
    background:transparent;border-color:var(--cd-border);color:var(--cd-text-3);
}
body.dark_mode .cd-v2 .cd-step.active .cd-num{
    background:var(--cd-blue);border-color:var(--cd-blue);color:#0b1424;
    box-shadow:0 0 0 4px rgba(96,165,250,.20);
}
body.dark_mode .cd-v2 .cd-step-line{background:var(--cd-border)}
body.dark_mode .cd-v2 .cd-step-line.current{background:linear-gradient(90deg,var(--cd-blue),var(--cd-border))}

/* Features list step 1 */
body.dark_mode .cd-v2 .cd-create-info{
    background:rgba(255,255,255,.02);
    border-color:var(--cd-border);
}
body.dark_mode .cd-v2 .cd-ci-item .cd-ck{
    background:rgba(74,222,128,.18);color:#4ade80;
}

/* NS rows step 3 */
body.dark_mode .cd-v2 .cd-ns-row{
    background:rgba(255,255,255,.02);
    border-color:var(--cd-border);
}
body.dark_mode .cd-v2 .cd-ns-row .cd-ns-tag{
    background:rgba(96,165,250,.16);color:var(--cd-blue);
}
body.dark_mode .cd-v2 .cd-ns-status{background:rgba(251,146,60,.10);color:var(--cd-orange)}
body.dark_mode .cd-v2 .cd-ns-status.ok{background:rgba(74,222,128,.12);color:var(--cd-green)}
body.dark_mode .cd-v2 .cd-ns-status.err{background:rgba(248,113,113,.12);color:var(--cd-red)}

/* Done screen step 4 */
body.dark_mode .cd-v2 .cd-done-ic{background:rgba(74,222,128,.16);color:var(--cd-green)}
body.dark_mode .cd-v2 .cd-done-summary{border-color:var(--cd-border)}
body.dark_mode .cd-v2 .cd-done-summary .cd-ds-row{border-color:var(--cd-border-soft)}

/* Wizard actions border-top */
body.dark_mode .cd-v2 .cd-create-actions{border-color:var(--cd-border-soft)}
body.dark_mode .cd-v2 .cd-api-head{border-color:var(--cd-border-soft)}

/* Password warning banner (step 2): inline-styled — selector theo var */
body.dark_mode .cd-v2 [style*="--cd-orange-bg"]{
    border-color:rgba(251,146,60,.30) !important;
}
body.dark_mode .cd-v2 [style*="--cd-orange-bg"] > div{color:#fed7aa !important}
body.dark_mode .cd-v2 [style*="--cd-orange-bg"] code{
    background:rgba(255,255,255,.10) !important;
    color:var(--cd-text) !important;
}

/* Doc panel — nav, code box, table */
body.dark_mode .cd-v2 .cd-doc-nav .cd-di:hover{background:rgba(255,255,255,.04)}
body.dark_mode .cd-v2 .cd-doc-nav .cd-di.active{background:rgba(96,165,250,.14)}
body.dark_mode .cd-v2 .cd-code-box{background:#0c1322;color:#c3ccdb}  /* = sb-bg-2 + sb-text */
body.dark_mode .cd-v2 .cd-doc-table th{
    background:rgba(255,255,255,.03);
    border-color:var(--cd-border);
    color:var(--cd-text-3);
}
body.dark_mode .cd-v2 .cd-doc-table td{
    border-color:var(--cd-border);
    color:var(--cd-text-2);
}
body.dark_mode .cd-v2 .cd-ci{
    background:rgba(255,255,255,.07);
    color:var(--cd-text);
}
body.dark_mode .cd-v2 .cd-method.get{background:rgba(96,165,250,.18);color:var(--cd-blue)}
body.dark_mode .cd-v2 .cd-method.post{background:rgba(74,222,128,.18);color:var(--cd-green)}

/* Help card — accordion + CTA */
body.dark_mode .cd-v2 .cd-acc-item{
    background:rgba(255,255,255,.02);
    border-color:var(--cd-border);
    color:var(--cd-text);
}
body.dark_mode .cd-v2 .cd-acc-item:hover{background:rgba(255,255,255,.05)}
body.dark_mode .cd-v2 .cd-acc-item.open{
    background:rgba(96,165,250,.10);
    border-color:rgba(96,165,250,.30);
}
body.dark_mode .cd-v2 .cd-acc-body{
    background:rgba(255,255,255,.02);
    border-color:var(--cd-border-soft);
    color:var(--cd-text-2);
}
body.dark_mode .cd-v2 .cd-help-cta{
    background:rgba(96,165,250,.08);
    border-color:rgba(96,165,250,.22);
}
body.dark_mode .cd-v2 .cd-help-cta .cd-ic{background:rgba(96,165,250,.18);color:var(--cd-blue)}
body.dark_mode .cd-v2 .cd-help-cta .cd-ct-d{color:var(--cd-text-2)}

/* Table */
body.dark_mode .cd-v2 #datatable-domains thead th{
    background:rgba(255,255,255,.03);
    border-color:var(--cd-border);
    color:var(--cd-text-3);
}
body.dark_mode .cd-v2 #datatable-domains tbody td{
    border-color:var(--cd-border-soft);
    color:var(--cd-text-2);
}
body.dark_mode .cd-v2 #datatable-domains tbody tr:hover{background:rgba(255,255,255,.03)}
body.dark_mode .cd-v2 .cd-ab-pill.off{background:rgba(255,255,255,.06);color:var(--cd-text-3)}

/* Cancel-ticket–style nút Hủy/Check trong table giữ tone */
body.dark_mode .cd-v2 .btn-cancel-ticket{
    background:transparent;border-color:rgba(248,113,113,.35);color:var(--cd-red);
}
body.dark_mode .cd-v2 .btn-cancel-ticket:hover{background:rgba(248,113,113,.10)}

/* ===== SMALL MOBILE (<=480px): nén tối đa nhưng GIỮ thông tin ===== */
@media(max-width:480px){
    .cd-v2 .cd-api-card,.cd-v2 .cd-help-card{padding:18px 14px}
    .cd-v2 .cd-table-card{padding:16px 12px}

    /* Tabs: nén thêm font + padding */
    .cd-v2 .cd-tab{font-size:12px;gap:5px}
    .cd-v2 .cd-tab svg{width:13px;height:13px}

    /* Stepper: MỌI step vẫn hiện tên, font compact 11px, scroll ngang */
    .cd-v2 .cd-step .cd-st-t{display:inline;font-size:11px}
    .cd-v2 .cd-step{padding:5px 11px 5px 5px}
    .cd-v2 .cd-step .cd-num{width:26px;height:26px;flex:0 0 26px;font-size:12px}
    .cd-v2 .cd-step-line{min-width:18px;flex:0 0 22px}

    /* Token row: 2 button chia 50/50 (giữ flex-wrap từ 720px) */
    .cd-v2 .cd-token-row .cd-btn{font-size:12px;padding:8px 10px}

    /* Substep heading: vẫn đủ to để đọc */
    .cd-v2 .cd-substep-head{font-size:13.5px}
    .cd-v2 .cd-substep-sub{font-size:11.5px}

    /* NS rows: copy button nhảy xuống dưới value */
    .cd-v2 .cd-ns-row{flex-wrap:wrap}
    .cd-v2 .cd-ns-row .cd-ns-val{flex:1 1 100%;order:2;font-size:11.5px;padding-top:2px}
    .cd-v2 .cd-ns-row .cd-ns-cp{order:3;margin-left:auto}

    /* Action wizard buttons: stack dọc khi quá hẹp */
    .cd-v2 .cd-create-actions{flex-direction:column-reverse}
    .cd-v2 .cd-create-actions .cd-btn{width:100%}
}
/* ============================================================================
   Tài liệu API SMM V2/V3 (khối .cd-doc-legacy).
   Markup gốc dùng class Metronic v8 / Bootstrap 5 mà bộ CSS của site không có:
   w-md-200px (không định nghĩa) khiến cột tab dọc co còn ~78px, nhãn xuống 2-3
   dòng; me-5 cũng không tồn tại nên mất khoảng cách với phần nội dung.
   Cấp lại đúng bề rộng thiết kế gốc và khoảng cách.
   ========================================================================== */
@media (min-width: 768px) {
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-md-column {
        flex: 0 0 210px;
        width: 210px;
        margin-right: 24px;
    }
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-md-column .nav-item { width: 100%; }
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-md-column .nav-link { white-space: nowrap; }
}

/* Mobile: danh sách tab nằm ngang, cho cuộn thay vì bóp chữ xuống nhiều dòng */
@media (max-width: 767.98px) {
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-bottom: 14px;
    }
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-row .nav-item { flex: 0 0 auto; }
    .cd-v2 .cd-doc-legacy .nav-tabs.flex-row .nav-link { white-space: nowrap; }
}

/* Phần nội dung tài liệu là flex item; mặc định min-width:auto khiến nó không co
   được nhỏ hơn bề rộng bảng bên trong -> bảng tràn ra ngoài .card. Cho phép co
   lại và để mỗi tab-pane tự cuộn ngang khi bảng rộng hơn khung. */
.cd-v2 .cd-doc-legacy .d-flex > .tab-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.cd-v2 .cd-doc-legacy .tab-content > .tab-pane {
    max-width: 100%;
    overflow-x: auto;
}