/* ===== FGS Pay — auth portal UI ===== */
:root{
    --p-primary:#6366f1;       /* indigo-500 */
    --p-primary-d:#4f46e5;     /* indigo-600 */
    --p-primary-l:#818cf8;
    --p-bg:#f5f6f9;
    --p-card:#ffffff;
    --p-text:#1f2937;
    --p-muted:#6b7280;
    --p-border:#e5e7eb;
    --p-radius:10px;
    --p-shadow:0 18px 50px rgba(15,23,42,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
    font-family:'Inter','Roboto Condensed',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    color:var(--p-text);background:var(--p-bg);
    line-height:1.55;min-height:100vh;position:relative;overflow-x:hidden;
    font-size:13.5px;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Bottom decorative oval (subtle shadow like the screenshot) */
body::after{
    content:"";position:fixed;left:-10%;right:-10%;bottom:-40%;height:60vh;
    background:radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.07) 0%, transparent 60%);
    z-index:-1;pointer-events:none
}

/* Top mini header */
.pay-header{
    background:transparent;padding:18px 28px;
    display:flex;align-items:center;justify-content:space-between
}
.pay-header .brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;color:#0f1722}
.pay-header .brand img{height:34px;width:auto}
.pay-header .brand .tag{
    background:var(--p-primary);color:#fff;
    padding:3px 8px;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.5px
}
.pay-header nav{display:flex;gap:18px;font-size:14px;color:var(--p-muted)}
.pay-header nav a:hover{color:var(--p-primary-d)}

/* Centered card layout */
.pay-wrap{
    min-height:calc(100vh - 70px);
    display:flex;align-items:flex-start;justify-content:center;
    padding:40px 20px 80px
}
.pay-card{
    width:100%;max-width:460px;background:var(--p-card);
    border-radius:var(--p-radius);padding:38px 36px 32px;
    box-shadow:var(--p-shadow)
}

/* Card header (logo + product name) */
.pay-card .head{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-bottom:28px;
}
.pay-card .head img{height:48px;width:auto}
.pay-card .head .name{font-size:18px;font-weight:900;color:#0f1722;line-height:1.25}
.pay-card .head .name small{display:block;color:var(--p-muted);font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* Inputs */
.form-group{margin-bottom:14px;position:relative}
.form-group input{
    width:100%;padding:10px 13px;border:1px solid var(--p-border);
    border-radius:6px;font:inherit;font-size:13.5px;background:#fff;
    transition:border .15s,box-shadow .15s
}
.form-group input::placeholder{color:#9ca3af}
.form-group input:focus{
    outline:0;border-color:var(--p-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,.18)
}
.form-group.has-eye input{padding-right:46px}
.form-group .eye{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    cursor:pointer;font-size:18px;color:#9ca3af;user-select:none;line-height:1
}
.form-group .eye:hover{color:var(--p-text)}

/* Mock captcha box (visual placeholder for reCAPTCHA) */
.captcha-box{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border:1px solid var(--p-border);border-radius:5px;
    padding:12px 14px;background:#f9fafb;margin-bottom:14px
}
.captcha-box .left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.captcha-box input[type=checkbox]{
    appearance:none;-webkit-appearance:none;
    width:24px;height:24px;border:2px solid #c1c7d0;border-radius:3px;
    background:#fff;cursor:pointer;flex-shrink:0;position:relative;transition:.15s
}
.captcha-box input[type=checkbox]:checked{background:var(--p-primary);border-color:var(--p-primary)}
.captcha-box input[type=checkbox]:checked::after{
    content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    color:#fff;font-size:16px;font-weight:900
}
.captcha-box .lbl{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#374151;line-height:1.3}
.captcha-box .lbl small{color:#9ca3af;font-size:10px}
.captcha-box .recap{
    display:flex;flex-direction:column;align-items:center;
    color:#4a5568;font-size:9px;font-weight:600;letter-spacing:.3px;
    line-height:1.1;text-align:center;flex-shrink:0
}
.captcha-box .recap .logo{
    width:32px;height:32px;border-radius:50%;margin-bottom:3px;
    background:
        conic-gradient(from 0deg, #3b82f6 0deg 90deg, #2563eb 90deg 180deg, #1e40af 180deg 270deg, #1e3a8a 270deg 360deg);
    position:relative
}
.captcha-box .recap .logo::after{
    content:"";position:absolute;inset:6px;border-radius:50%;background:#fff
}

/* Row: remember + forgot */
.row-options{
    display:flex;justify-content:space-between;align-items:center;
    margin:10px 0 18px;font-size:14px
}
.row-options label{
    display:flex;align-items:center;gap:8px;cursor:pointer;color:#374151
}
.row-options label input[type=checkbox]{
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:2px solid #c1c7d0;border-radius:50%;
    background:#fff;cursor:pointer;position:relative;transition:.15s
}
.row-options label input[type=checkbox]:checked{
    background:var(--p-primary);border-color:var(--p-primary)
}
.row-options label input[type=checkbox]:checked::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:6px;height:6px;border-radius:50%;background:#fff
}
.row-options a{color:var(--p-primary-d);font-weight:600}
.row-options a:hover{text-decoration:underline}

/* Primary button */
.btn-pay{
    width:100%;background:var(--p-primary);color:#fff;
    padding:10px 18px;border:0;border-radius:6px;font:inherit;
    font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s;
    box-shadow:0 4px 14px rgba(99,102,241,.35)
}
.btn-pay:hover{background:var(--p-primary-d);box-shadow:0 6px 18px rgba(99,102,241,.45)}
.btn-pay:active{transform:translateY(1px)}

.foot-link{
    text-align:center;margin-top:18px;font-size:14px;color:var(--p-muted)
}
.foot-link a{color:var(--p-primary-d);font-weight:700}
.foot-link a:hover{text-decoration:underline}

/* Alerts */
.alert{
    padding:11px 14px;border-radius:6px;font-size:14px;margin-bottom:14px
}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-info{background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe}

/* Bottom note */
.pay-footnote{
    text-align:center;color:#94a3b8;font-size:12.5px;
    padding:0 20px 30px;position:relative;z-index:1
}
.pay-footnote a{color:var(--p-primary-d)}
.pay-footnote a:hover{text-decoration:underline}

/* ===== 2-step register wizard ===== */
.register-card{max-width:880px}

.stepper{
    display:flex;align-items:center;gap:14px;
    margin:8px 0 30px;padding:0 8px
}
.step{
    display:flex;align-items:center;gap:14px;flex-shrink:0
}
.step .circle{
    width:34px;height:34px;border-radius:50%;
    border:2px solid #d1d5db;color:#9ca3af;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:13px;flex-shrink:0;background:#fff;transition:.2s
}
.step .info{font-size:13.5px;line-height:1.2;color:#9ca3af}
.step .info strong{display:block;font-size:15.5px;color:#9ca3af;font-weight:800;margin-bottom:2px}
.step.active .circle,
.step.active .info,
.step.active .info strong{color:#0f1722}
.step.active .circle{border-color:var(--p-primary);color:var(--p-primary)}
.step.done .circle{background:var(--p-primary);border-color:var(--p-primary);color:#fff}
.step.done .circle::before{content:"✓";font-size:16px}
.step.done .circle span{display:none}
.step.done .info strong{color:#0f1722}
.step-line{flex:1;height:2px;background:#e5e7eb;border-radius:2px;transition:.3s}
.step-line.full{background:var(--p-primary)}

.step-section h2{font-size:22px;margin-bottom:4px}
.step-section .step-sub{color:var(--p-muted);font-size:14px;margin-bottom:22px}

.step-view{display:block}
.step-view.hidden{display:none}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.form-row .form-group,
.form-row-3 .form-group{margin-bottom:0}

.input-otp{
    display:grid;grid-template-columns:1fr 160px;gap:14px;margin-bottom:14px
}
.btn-otp{
    background:#e0e7ff;color:#6366f1;border:0;border-radius:6px;
    font:inherit;font-weight:700;font-size:14px;cursor:pointer;
    padding:12px;transition:.15s
}
.btn-otp:hover{background:#c7d2fe}
.btn-otp:disabled{opacity:.55;cursor:not-allowed}

.form-group select{
    width:100%;padding:13px 14px;border:1px solid var(--p-border);
    border-radius:6px;font:inherit;font-size:15px;background:#fff;
    transition:border .15s,box-shadow .15s;cursor:pointer;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'><path fill='%236b7280' d='M10 12l-5-5h10z'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:36px
}
.form-group select:focus{
    outline:0;border-color:var(--p-primary);box-shadow:0 0 0 3px rgba(99,102,241,.18)
}

.radio-group{display:flex;gap:24px;margin-bottom:18px;padding:4px 2px;font-size:15px}
.radio-group label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#374151}
.radio-group input[type=radio]{
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:2px solid #c1c7d0;border-radius:50%;
    background:#fff;cursor:pointer;position:relative;transition:.15s
}
.radio-group input[type=radio]:checked{border-color:var(--p-primary)}
.radio-group input[type=radio]:checked::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:8px;height:8px;border-radius:50%;background:var(--p-primary)
}

.btn-ghost-line{
    background:transparent;color:#374151;border:1px solid #d1d5db;
    padding:11px 22px;border-radius:6px;font:inherit;font-weight:700;
    font-size:14px;cursor:pointer;transition:.15s
}
.btn-ghost-line:hover{background:#f3f4f6;border-color:#9ca3af}

.btn-success{
    background:#22c55e;color:#fff;border:0;padding:11px 28px;border-radius:6px;
    font:inherit;font-weight:800;font-size:14.5px;cursor:pointer;transition:.15s;
    box-shadow:0 4px 14px rgba(34,197,94,.35)
}
.btn-success:hover{background:#16a34a;box-shadow:0 6px 18px rgba(34,197,94,.45)}

.step-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.step-actions.right{justify-content:flex-end}

/* Floating label + per-field inline error */
.form-group.floating{position:relative}
.form-group.floating input,
.form-group.floating select{padding-top:18px;padding-bottom:8px}
.form-group.floating > label{
    position:absolute;left:13px;top:50%;transform:translateY(-50%);
    color:#9ca3af;font-size:13px;pointer-events:none;
    transition:transform .15s,top .15s,font-size .15s,color .15s;
    background:#fff;padding:0 4px;line-height:1
}
.form-group.floating input:focus + label,
.form-group.floating input:not(:placeholder-shown) + label,
.form-group.floating select:focus + label,
.form-group.floating select.has-value + label,
.form-group.floating select + label{   /* select luôn có value → label luôn floated */
    top:-8px;transform:none;font-size:11px;color:var(--p-primary-d);
    font-weight:600;z-index:2
}
.form-group.floating.error input,
.form-group.floating.error select{border-color:#ef4444 !important;color:#dc2626}
.form-group.floating.error > label{color:#ef4444 !important}
.form-group.error .radio-group{border:1px solid #ef4444;border-radius:6px;background:#fef2f2}
.form-group.floating.error input::placeholder{color:#fca5a5}
.field-error{
    display:none;color:#dc2626;font-size:12.5px;font-weight:600;
    margin-top:4px;line-height:1.4
}
.form-group.error .field-error{display:block}

.agree-box{
    display:flex;align-items:flex-start;gap:10px;
    margin:14px 0 4px;font-size:13.5px;color:#374151;cursor:pointer
}
.agree-box input[type=checkbox]{
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:2px solid #c1c7d0;border-radius:3px;
    background:#fff;cursor:pointer;flex-shrink:0;margin-top:1px;position:relative;transition:.15s
}
.agree-box input[type=checkbox]:checked{background:var(--p-primary);border-color:var(--p-primary)}
.agree-box input[type=checkbox]:checked::after{
    content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    color:#fff;font-size:12px;font-weight:900;line-height:1
}
.agree-box a{color:var(--p-primary-d);font-weight:600;text-decoration:underline}
.agree-box a:hover{color:var(--p-primary)}

/* Dashboard (when logged in) */
.pay-shell{max-width:1080px;margin:0 auto;padding:30px 20px}
.pay-shell h1{font-size:24px;margin-bottom:6px}
.pay-shell .sub{color:var(--p-muted);margin-bottom:24px}
.wallet{
    background:linear-gradient(135deg,var(--p-primary),var(--p-primary-d));color:#fff;
    border-radius:12px;padding:24px 28px;margin-bottom:26px;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    box-shadow:0 16px 36px rgba(99,102,241,.25)
}
.wallet .lbl{opacity:.8;font-size:13px;letter-spacing:.5px;text-transform:uppercase}
.wallet .amt{font-size:34px;font-weight:900;letter-spacing:.5px}
.wallet .right{text-align:right;font-size:13px;opacity:.85}
.section-title{font-size:18px;font-weight:900;margin:24px 0 14px;color:#0f1722}
.methods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.method{
    background:#fff;border:2px solid var(--p-border);border-radius:10px;
    padding:18px;text-align:center;cursor:pointer;transition:.15s;
    display:flex;flex-direction:column;align-items:center;gap:8px
}
.method:hover{border-color:var(--p-primary);transform:translateY(-2px)}
.method .icon{font-size:30px}
.method h4{font-size:14px;color:#0f1722}
.method p{font-size:12.5px;color:var(--p-muted)}
.method.disabled{opacity:.55;cursor:not-allowed}
.method.disabled:hover{transform:none;border-color:var(--p-border)}
.locked-note{
    background:#fef3c7;color:#92400e;border:1px solid #fde68a;
    padding:14px 16px;border-radius:8px;font-size:14px;margin-top:18px
}

@media (max-width:720px){
    .methods{grid-template-columns:repeat(2,1fr)}
    .pay-card{padding:28px 22px}
}

/* ===== History tables (DataTable-style, dùng cho 3 tab AJAX) ===== */
.hist-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.hist-pp{padding:6px 10px;border:1px solid var(--p-border);border-radius:6px;font:inherit;font-size:14px;background:#fff;margin-right:6px}
.hist-search{padding:6px 12px;border:1px solid var(--p-border);border-radius:6px;font:inherit;font-size:14px;margin-left:6px}
.hist-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1100px}
.hist-tbl th,.hist-tbl td{padding:10px 11px;border-bottom:1px solid #f1f5f9;text-align:left;vertical-align:middle;white-space:nowrap}
.hist-tbl th{font-weight:800;color:#374151;font-size:11px;text-transform:uppercase;letter-spacing:.4px;background:#f9fafb;position:relative;border-top:1px solid #e5e7eb}
.hist-tbl tbody tr:hover{background:#f9fafb}
.dt-sortable{cursor:pointer;padding-right:24px !important;user-select:none}
.dt-sortable:hover{background:#f3f4f6}
.dt-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;flex-direction:column;line-height:.6;color:#cbd5e1;font-size:9px}
.dt-arrow::before{content:"▲"}
.dt-arrow::after{content:"▼"}
.dt-sortable.dt-sort-asc  .dt-arrow::before{color:var(--p-primary)}
.dt-sortable.dt-sort-desc .dt-arrow::after{color:var(--p-primary)}
.btn-recheck{background:#f59e0b;color:#fff;border:0;padding:7px 18px;border-radius:6px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:.15s;letter-spacing:.3px}
.btn-recheck:hover{background:#d97706}
.hist-pager{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:10px}
.hist-pages button{background:#fff;border:1px solid var(--p-border);padding:6px 12px;margin:0 2px;border-radius:6px;cursor:pointer;font:inherit;font-size:13px;color:#374151;min-width:34px}
.hist-pages button:hover:not(:disabled){background:#f3f4f6}
.hist-pages button:disabled{opacity:.45;cursor:not-allowed}
.hist-pages button.pg-active{background:var(--p-primary);color:#fff;border-color:var(--p-primary)}
.pill{display:inline-block;padding:3px 12px;border-radius:4px;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.pill-success{background:#dcfce7;color:#166534}
.pill-pending{background:#fef3c7;color:#92400e}
.pill-failed{background:#fee2e2;color:#991b1b}