/* =====================================================================
   Chankhoa.Pro — UI components (tái dùng toàn site)
   Dùng sau base.css. Prefix ck- cho component mới; đồng thời map các
   class Bootstrap phổ biến về token để đồng bộ giao diện cũ.
   ===================================================================== */

/* ============ BUTTONS ============ */
.ck-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-sans); font-weight:700; font-size:var(--fs-sm);
  line-height:1; white-space:nowrap; cursor:pointer; user-select:none;
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:12px 22px; transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  text-decoration:none;
}
.ck-btn:active{ transform:translateY(0) scale(.99); }
.ck-btn.btn-loading,
.btn.btn-loading{
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ck-btn i{ font-size:1.05em; }

.ck-btn--primary{ background:var(--grad); color:var(--on-brand); box-shadow:0 12px 26px rgba(79,70,229,.30); }
.ck-btn--primary:hover{ color:var(--on-brand); transform:translateY(-2px); box-shadow:0 16px 34px rgba(79,70,229,.42); }

.ck-btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--ring-sm); }
.ck-btn--ghost:hover{ color:var(--ink); transform:translateY(-2px); border-color:var(--border-strong); }

.ck-btn--soft{ background:var(--primary-soft); color:var(--on-primary-soft); }
.ck-btn--soft:hover{ background:var(--primary-soft); color:var(--on-primary-soft); transform:translateY(-2px); }

.ck-btn--white{ background:var(--surface); color:var(--primary); border:1px solid var(--border); }
.ck-btn--white:hover{ color:var(--primary-hover); transform:translateY(-2px); background:var(--surface-2); }

.ck-btn--danger{ background:var(--danger); color:var(--on-brand); }
.ck-btn--danger:hover{ background:var(--danger-strong); color:var(--on-brand); }

.ck-btn--lg{ padding:16px 32px; font-size:var(--fs-md); }
.ck-btn--sm{ padding:8px 14px; font-size:var(--fs-xs); }
.ck-btn--block{ width:100%; }

.ck-icon-btn{
  width:40px; height:40px; border-radius:var(--r-pill); display:inline-grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--ink);
  box-shadow:var(--ring-sm); cursor:pointer; transition:transform var(--t), border-color var(--t), background var(--t);
}
.ck-icon-btn:hover{ transform:translateY(-1px); border-color:var(--border-strong); }

/* Card / table primitives → components/card.css, components/table.css (T3.2.1) */

/* ============ SECTION / HEADERS ============ */
.ck-section{ padding:var(--sp-10) 0; }
.ck-section--alt{
  background:var(--bg-tint);
  border-block:1px solid var(--border);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--surface) 65%, transparent);
}
.ck-section--tint{ background:var(--bg-tint); border-block:1px solid var(--border); }
.ck-section-head{ text-align:center; max-width:680px; margin:0 auto var(--sp-8); }
.ck-eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  color:var(--on-primary-soft); background:var(--primary-soft); border:1px solid var(--primary-soft-border);
  font-weight:800; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em;
  padding:6px 14px; border-radius:var(--r-pill);
}
.ck-h2{ font-size:clamp(1.7rem,4.2vw,2.5rem); margin-top:var(--sp-4); }
.ck-h3{ font-size:var(--fs-lg); }
.ck-sub{ color:var(--body); margin-top:var(--sp-3); font-size:var(--fs-md); }

/* ============ BADGE / CHIP / PILL ============ */
.ck-badge{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:var(--fs-xs); padding:5px 12px; border-radius:var(--r-pill); }
.ck-badge--brand{ background:var(--grad); color:var(--on-brand); }
.ck-badge--soft{ background:var(--primary-soft); color:var(--on-primary-soft); border:1px solid var(--primary-soft-border); }
.ck-badge--success{ background:color-mix(in srgb,var(--success) 14%, transparent); color:var(--success-strong); }
.ck-badge--warning{ background:color-mix(in srgb,var(--warning) 16%, transparent); color:var(--warning); }
.ck-badge--danger{ background:color-mix(in srgb,var(--danger) 14%, transparent); color:var(--danger-strong); }

.ck-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--body); border-radius:var(--r-pill); padding:8px 15px; font-size:var(--fs-sm); font-weight:600; }
.ck-chip i{ color:var(--primary); }

.ck-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); color:var(--on-primary-soft); font-weight:700; font-size:var(--fs-xs); padding:8px 16px; border-radius:var(--r-pill); box-shadow:var(--ring-sm); }
.ck-pill .ck-dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 22%, transparent); }

/* ============ ICON TILE ============ */
.ck-itile{ width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center; font-size:1.6rem; background:var(--grad-soft); color:var(--primary); }

/* ============ PRICING ============ */
.ck-price{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-xl); padding:var(--sp-7); width:360px; max-width:100%; box-shadow:var(--ring); position:relative; display:flex; flex-direction:column; }
.ck-price--feat{ border:2px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; box-shadow:var(--ring-lg); }
.ck-price__badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad); color:var(--on-brand); font-size:var(--fs-xs); font-weight:800; padding:7px 16px; border-radius:var(--r-pill); box-shadow:0 8px 18px rgba(79,70,229,.4); white-space:nowrap; }
.ck-price__name{ font-weight:800; color:var(--heading); font-size:var(--fs-lg); }
.ck-price__amt{ font-size:var(--fs-3xl); font-weight:900; color:var(--heading); margin:var(--sp-2) 0 2px; letter-spacing:var(--tracking-tight); }
.ck-price__amt small{ font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.ck-price__list{ list-style:none; margin:var(--sp-5) 0; flex:1; }
.ck-price__list li{ display:flex; gap:10px; padding:8px 0; font-size:var(--fs-sm); color:var(--body); }
.ck-price__list li i{ color:var(--primary); margin-top:3px; flex-shrink:0; }

/* ============ STEPS ============ */
.ck-step{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); padding:var(--sp-6); box-shadow:var(--ring); }
.ck-step__n{ width:38px; height:38px; border-radius:var(--r-sm); background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:800; margin-bottom:var(--sp-4); }
.ck-step h4{ color:var(--heading); font-size:var(--fs-base); margin-bottom:6px; }
.ck-step p{ font-size:var(--fs-sm); }

/* ============ TESTIMONIAL ============ */
.ck-testi{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--ring); }
.ck-testi__stars{ color:var(--warning); margin-bottom:var(--sp-3); }
.ck-testi__text{ color:var(--body); font-size:var(--fs-sm); }
.ck-testi__who{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); }
.ck-avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:var(--on-brand); font-weight:800; flex-shrink:0; }
.ck-testi__who b{ color:var(--heading); display:block; font-size:var(--fs-sm); }
.ck-testi__who small{ color:var(--muted); }

/* ============ STATUS CARD ============ */
.ck-status{ background:color-mix(in srgb,var(--surface) 82%, transparent); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-xl); padding:var(--sp-5); box-shadow:var(--ring-lg); text-align:left; }
.ck-status__top{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.ck-status__sh{ width:46px; height:46px; border-radius:var(--r-sm); background:var(--grad); display:grid; place-items:center; color:var(--on-brand); font-size:1.3rem; }
.ck-status__top b{ color:var(--heading); display:block; font-size:var(--fs-base); }
.ck-status__top small{ color:var(--success-strong); font-weight:700; }
.ck-status__row{ display:flex; align-items:center; gap:10px; padding:8px 0; color:var(--body); font-size:var(--fs-sm); border-top:1px dashed var(--border); }
.ck-status__row i{ color:var(--success); }

/* ============ FAQ / ACCORDION (Bootstrap) ============ */
.ck-faq{ max-width:780px; margin:0 auto; }
.ck-faq .accordion-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md) !important; margin-bottom:var(--sp-3); overflow:hidden; box-shadow:var(--ring-sm); }
.ck-faq .accordion-button{ background:var(--surface); color:var(--heading); font-weight:700; font-size:var(--fs-base); padding:var(--sp-4) var(--sp-5); }
.ck-faq .accordion-button:not(.collapsed){ background:var(--primary-soft); color:var(--on-primary-soft); box-shadow:none; }
.ck-faq .accordion-button:focus{ box-shadow:none; border-color:transparent; }
.ck-faq .accordion-body{ color:var(--body); font-size:var(--fs-sm); padding:0 var(--sp-5) var(--sp-5); }

/* ============ CTA BAND ============ */
.ck-cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:var(--sp-9) var(--sp-6); text-align:center; background:var(--grad); box-shadow:var(--ring-lg); }
.ck-cta::after{ content:""; position:absolute; inset:0; opacity:.22; background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }
.ck-cta>*{ position:relative; z-index:1; }
.ck-cta h2{ color:var(--on-brand); font-size:clamp(1.6rem,4vw,2.3rem); }
.ck-cta p{ color:color-mix(in srgb, var(--on-brand) 92%, transparent); max-width:540px; margin:var(--sp-3) auto var(--sp-6); }

/* ============ FORMS (map Bootstrap) ============ */
.form-control,.form-select{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--ink) !important;
  padding:.7rem .9rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 .22rem color-mix(in srgb,var(--primary) 18%, transparent) !important;
  background:var(--surface) !important; color:var(--ink) !important;
}
.form-control::placeholder{ color:var(--muted) !important; opacity:1; }
.form-select option{ background:var(--surface) !important; color:var(--ink) !important; }
.form-label{ color:var(--heading); font-weight:600; margin-bottom:.4rem; }
.form-control[readonly],.form-control:disabled,.form-select:disabled{ background:var(--surface-2) !important; color:var(--muted) !important; cursor:not-allowed; }
.input-group-text{ background:var(--surface-2); border:1px solid var(--border); color:var(--body); }
.form-check-input{ background-color:var(--surface); border-color:var(--border-strong); }
.form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.form-check-input:focus{ box-shadow:0 0 0 .22rem color-mix(in srgb,var(--primary) 18%, transparent); border-color:var(--primary); }
.form-text{ color:var(--muted); }

/* ============ BUTTONS (map Bootstrap -> token) ============ */
.btn{ font-weight:700; border-radius:var(--r-sm); letter-spacing:.1px; }
.btn-primary{ background:var(--grad); border:none; color:var(--on-brand); box-shadow:0 12px 26px rgba(79,70,229,.28); }
.btn-primary:hover,.btn-primary:focus{ filter:brightness(1.03); color:var(--on-brand); box-shadow:0 16px 34px rgba(79,70,229,.4); }
.btn-outline-primary{ border-color:var(--primary); color:var(--primary); }
.btn-outline-primary:hover{ background:var(--primary); color:var(--on-brand); border-color:var(--primary); }
.btn-outline-secondary{ border-color:var(--border-strong); color:var(--body); background:var(--surface); }
.btn-outline-secondary:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--border-strong); }
.btn-success{ background:var(--success); border:none; color:var(--on-brand); }
.btn-danger{ background:var(--danger); border:none; color:var(--on-brand); }
.btn-light{ background:var(--surface-2); border:1px solid var(--border); color:var(--ink); }

/* ============ Bootstrap utilities → design tokens ============ */
.text-muted,
.text-body-secondary,
.text-secondary { color: var(--muted) !important; }

.text-dark { color: var(--ink) !important; }

.card .text-white,
.modal-content .text-white:not(.btn *),
.empty-state .text-white,
.dash-empty .text-white {
  color: var(--heading) !important;
}

.bg-light,
.bg-light-subtle {
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

.form-control.bg-light,
.form-control.bg-light[readonly] {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

.text-bg-light {
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border);
}

.text-bg-secondary {
  background-color: var(--surface-3) !important;
  color: var(--body) !important;
}

.text-bg-dark {
  background-color: color-mix(in srgb, var(--ink) 88%, var(--surface)) !important;
  color: var(--bg) !important;
}

.btn-link.text-muted,
.btn-link.text-secondary {
  color: var(--muted) !important;
}
.btn-link.text-muted:hover,
.btn-link.text-secondary:hover {
  color: var(--body) !important;
}

.list-group-item .text-muted,
.list-group-item .small.text-muted {
  color: var(--muted) !important;
}

.text-bg-warning {
  background-color: color-mix(in srgb, var(--warning) 18%, var(--surface)) !important;
  color: color-mix(in srgb, var(--warning) 82%, var(--heading)) !important;
}

.text-bg-primary {
  background-color: var(--primary-soft) !important;
  color: var(--on-primary-soft) !important;
}

.text-bg-success {
  background-color: color-mix(in srgb, var(--success) 14%, var(--surface)) !important;
  color: var(--success-strong) !important;
}

.text-bg-danger {
  background-color: color-mix(in srgb, var(--danger) 14%, var(--surface)) !important;
  color: var(--danger-strong) !important;
}

.text-bg-info {
  background-color: color-mix(in srgb, var(--info) 14%, var(--surface)) !important;
  color: var(--info) !important;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 0.1em 0.38em;
  border-radius: var(--r-xs);
}

.border-top { border-color: var(--border) !important; }
.border-bottom { border-color: var(--border) !important; }

/* ============ ALERT / MODAL / DROPDOWN (map Bootstrap) ============ */
.alert{ border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--body); }
.alert-success{ background:color-mix(in srgb,var(--success) 12%, var(--surface)); border-color:color-mix(in srgb,var(--success) 35%, transparent); color:var(--success-strong); }
.alert-danger{ background:color-mix(in srgb,var(--danger) 12%, var(--surface)); border-color:color-mix(in srgb,var(--danger) 35%, transparent); color:var(--danger-strong); }
.alert-warning{ background:color-mix(in srgb,var(--warning) 14%, var(--surface)); border-color:color-mix(in srgb,var(--warning) 35%, transparent); color:var(--warning); }
.alert-info,.alert-primary{ background:var(--primary-soft); border-color:var(--primary-soft-border); color:var(--on-primary-soft); }

.modal-content{ background:var(--surface); color:var(--body); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--ring-lg); }
.modal-header,.modal-footer{ border-color:var(--border); }
.modal-title{ color:var(--heading); }
.btn-close{ filter:none; }
:root[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); } }

.dropdown-menu{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--ring); padding:8px; }
.dropdown-item{ color:var(--body); border-radius:var(--r-xs); padding:9px 12px; }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--surface-2); color:var(--ink); }
.dropdown-item.active,.dropdown-item:active{ background:var(--primary); color:var(--on-brand); }
.dropdown-divider{ border-color:var(--border); }

/* ============ GRIDS tiện dụng ============ */
.ck-grid{ display:grid; gap:var(--sp-5); }
.ck-grid-2{ grid-template-columns:repeat(2,1fr); }
.ck-grid-3{ grid-template-columns:repeat(3,1fr); }
.ck-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .ck-grid-3,.ck-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ck-grid-2,.ck-grid-3,.ck-grid-4{ grid-template-columns:1fr; } }

/* ============ Spacing utilities ============ */
.ck-m-0 { margin: 0; }
.ck-mt-2 { margin-top: var(--sp-2); }
.ck-mt-4 { margin-top: var(--sp-4); }

figure.ck-testi { margin: 0; }
.ck-testi__text { margin: 0; }

.ck-price .ck-badge--success { margin-top: 6px; align-self: flex-start; }

.auth-hero-icon { font-size: 3rem; }