:root{
  --bg:#0b1220;
  --card:#121b2e;
  --text:#e8eefc;
  --muted:#9ab0da;
  --line:rgba(255,255,255,.10);
  --good:#2ee59d;
  --bad:#ff5b7e;
  --btn:#2a3dff;
  --btn2:#1b2aa8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(900px 500px at 20% 10%, #16264a 0%, var(--bg) 55%);color:var(--text)}

.wrap{max-width:980px;margin:28px auto;padding:0 16px}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
h1{margin:0;font-size:28px;letter-spacing:.2px}
h2{margin:0 0 12px;font-size:18px}
.muted{color:var(--muted)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin:14px 0;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,textarea{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 12px;
  border-radius:12px;
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(46,229,157,.55);box-shadow:0 0 0 3px rgba(46,229,157,.12)}
textarea{resize:vertical;min-height:110px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}

.row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(0,0,0,.25);
  cursor:pointer;text-decoration:none;font-weight:600;
}
.btn:hover{border-color:rgba(255,255,255,.22)}
.btn.primary{background:linear-gradient(180deg,var(--btn),var(--btn2));border-color:rgba(42,61,255,.35)}
.btn.ghost{background:transparent}

.quotaBox{
  padding:12px;border:1px dashed rgba(255,255,255,.20);
  border-radius:12px;background:rgba(0,0,0,.18);
}
.quotaLine{display:flex;justify-content:space-between;margin:6px 0}

.result{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.resultHead{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(0,0,0,.22);border-bottom:1px solid var(--line)}
pre{margin:0;padding:12px;overflow:auto;background:rgba(0,0,0,.30);max-height:360px}

.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-weight:800;font-size:12px}
.pill.ok{border-color:rgba(46,229,157,.45);color:var(--good)}
.pill.bad{border-color:rgba(255,91,126,.45);color:var(--bad)}

.foot{padding:8px 2px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;font-size:13px}
.small{font-size:12px}

.sms-counter {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sms-counter .warn {
  color: #ffb020;
  font-weight: 700;
}

.sms-counter .danger {
  color: #ff5b7e;
  font-weight: 800;
}

.result-success {
  color: #4dffb3;
  font-weight: 700;
}

.result-info {
  margin-top: 6px;
  color: #9bb0ff;
  font-size: 13px;
}

/* =========================
   API GATEWAY SELECT
========================= */

.api-gateway-wrap {
  margin-top: 12px;
}

.api-gateway-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af; /* xám nhạt */
  margin-bottom: 6px;
  letter-spacing: .2px;
}

.api-gateway-wrap select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #111827, #0b1220);
  color: #e5e7eb;
  font-size: 14px;
  outline: none;
  cursor: pointer;

  /* bỏ style mặc định */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* icon mũi tên */
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;

  transition: border .2s, box-shadow .2s;
}

.api-gateway-wrap select:hover {
  border-color: rgba(59,130,246,.4);
}

.api-gateway-wrap select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}

/* option */
.api-gateway-wrap option {
  background: #0b1220;
  color: #e5e7eb;
}