/* ==========================================================================
   Component: btn
   Nút dùng chung — nạp on-demand qua teco_render_component('btn').

   Token tham chiếu (phải khai báo ở :root trong main.css hoặc theme):
     --orange          CTA fill             #FF9900
     --ink             chữ mặc định         #141A24
     --ink-2           chữ phụ
     --blue            accent xanh          #146EB4
     --line            viền ghost           #D7DEE7
     --dark-line       viền onDark          #37435C
     --radius-btn      bo góc nút           8px
     --ease            easing chung         cubic-bezier(.16,1,.3,1)

   Contrast cam #FF9900 + chữ #141A24 = 8.4:1 (AAA).
   ========================================================================== */

/* ── Base ────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  padding:14px 24px;
  border-radius:var(--radius-btn, 8px);
  border:1px solid transparent;
  font-weight:600;
  font-size:.9375rem;            /* 15px */
  line-height:1.65;
  cursor:pointer;
  text-decoration:none;
  transition:
    transform       .18s var(--ease, ease),
    background-color .18s var(--ease, ease),
    border-color    .18s var(--ease, ease),
    color           .18s var(--ease, ease);
}

.btn:active{
  transform:translateY(1px);
}

/* Icon bên trong nút */
.btn svg{
  width:16px;
  height:16px;
  flex:none;
}

/* ── Variant: primary ──────────────────────────────────────────────────── */
.btn--primary{
  background:var(--orange, #FF9900);
  color:#141A24;
  border-color:var(--orange, #FF9900);
}
.btn--primary:hover{
  background:#FFFFFF;
  color:var(--orange, #FF9900);
  border-color:var(--orange, #FF9900);
}

/* ── Variant: ghost ────────────────────────────────────────────────────── */
.btn--ghost{
  background:transparent;
  color:var(--ink, #141A24);
  border-color:var(--line, #D7DEE7);
}
.btn--ghost:hover{
  border-color:var(--blue, #146EB4);
  color:var(--blue, #146EB4);
}

/* ── Variant: onDark ───────────────────────────────────────────────────── */
.btn--onDark{
  background:transparent;
  color:#fff;
  border-color:var(--dark-line, #37435C);
}
.btn--onDark:hover{
  border-color:var(--orange, #FF9900);
  color:var(--orange, #FF9900);
}

/* ── Size: sm ──────────────────────────────────────────────────────────── */
.btn--sm{
  padding:10px 16px;
  font-size:.875rem;             /* 14px */
}

/* ── State: loading (dùng bởi JS form submit) ─────────────────────────── */
.btn[data-loading]{
  opacity:.72;
  pointer-events:none;
}

/* ── Focus visible ─────────────────────────────────────────────────────── */
.btn:focus-visible{
  outline:2px solid var(--orange, #FF9900);
  outline-offset:3px;
  border-radius:var(--radius-btn, 8px);
}