/* page-subsite — Đăng ký trang con, dựng lại client_agent-store của ceoacc (.ha-*).
 * Giá trị theo luật thắng thật ở gốc: thẻ <style> của trang (đơn vị rem) bị ceo-glass-pages.css ghi đè
 * một phần (màu, bo 24/20/16/12, cỡ chữ 11/13/14/17/24/22px). Giữ nguyên đơn vị của luật thắng.
 * Mọi luật gói trong #page-subsite. */

#page-subsite {
  --ha-heading-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ha-note-line: rgba(40, 123, 224, .2);
}

#page-subsite .ha-wrap { width: 100%; max-width: none; min-width: 0; margin: 0; color: var(--cg-text); }

/* Khung tiêu đề */
#page-subsite .ha-hero {
  position: relative; overflow: hidden;
  margin-bottom: 1rem; padding: 1rem 1.2rem;
  color: var(--cg-text);
  background: linear-gradient(135deg, var(--cg-surface, #fff) 55%, var(--cg-soft, #f7f9fd));
  border: 1px solid var(--cg-line); border-radius: 24px;
  box-shadow: var(--cg-shadow, 0 8px 26px rgba(52,72,115,.055));
}
#page-subsite .ha-hero-decoration {
  position: absolute; right: -78px; bottom: -150px; width: 250px; height: 250px;
  border: 38px solid rgba(255,255,255,.09); border-radius: 50%; pointer-events: none;
}
#page-subsite .ha-hero-content { position: relative; z-index: 1; }
#page-subsite .ha-hero-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: .4rem; padding: .28rem .68rem;
  color: var(--cg-primary); background: var(--cg-blue-soft);
  border: 1px solid var(--cg-line); border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1.5;
}
#page-subsite .ha-hero h1 {
  margin: 0 0 .2rem; color: var(--cg-text);
  font-family: var(--ha-heading-font); font-size: 24px; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.2;
}
#page-subsite .ha-hero-description { max-width: 760px; margin: 0; color: var(--cg-muted); font-size: 13px; line-height: 1.6; }

/* Thẻ chung */
#page-subsite .ha-card {
  overflow: hidden; margin: 0 0 1rem; padding: 0;
  color: var(--cg-text);
  background: linear-gradient(135deg, var(--cg-surface, #fff) 55%, var(--cg-soft, #f7f9fd));
  border: 1px solid var(--cg-line); border-radius: 24px;
  box-shadow: var(--cg-shadow, 0 8px 26px rgba(52,72,115,.055));
}
#page-subsite .ha-card-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .65rem 1rem; margin: 0; padding: .9rem 1.1rem;
  background: var(--cg-surface, #fff);
  border-bottom: 1px solid var(--cg-line); border-radius: 23px 23px 0 0;
}
#page-subsite :is(.ha-section-title, .ha-benefits-head) {
  display: flex; align-items: center; gap: .62rem; margin: 0;
  color: var(--cg-text); font-family: var(--ha-heading-font);
  font-size: 17px; font-weight: 600; line-height: 1.5;
}
#page-subsite .ha-benefits-head { line-height: 1.2; }   /* h2 không có line-height riêng → 1.2 của Bootstrap */
#page-subsite :is(.ha-section-title, .ha-benefits-head) > i {
  display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--cg-primary); background: var(--cg-blue-soft);
}
#page-subsite .ha-card-body { padding: 1.1rem; }
#page-subsite .ha-card-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem;
  padding: .85rem 1.1rem;
  background: var(--cg-soft, #f7f9fd);
  border-top: 1px solid var(--cg-line); border-radius: 0 0 23px 23px;
}
#page-subsite .ha-application-form { margin: 0; }
#page-subsite .ha-muted, #page-subsite .ha-help { color: var(--cg-muted); }
#page-subsite p.ha-muted { margin: 0 0 1rem; font-size: 14px; }

/* Bốn tính năng */
#page-subsite .ha-benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#page-subsite .ha-benefit { position: relative; min-width: 0; padding: 4px 8px 4px 44px; }
#page-subsite .ha-benefit-icon {
  position: absolute; left: 0; top: 4px;
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  color: var(--cg-primary); background: var(--cg-blue-soft); border-radius: 10px;
}
#page-subsite .ha-benefit strong { display: block; margin-bottom: 5px; color: var(--cg-text); font-size: 14px; font-weight: 600; }
#page-subsite .ha-benefit > span:not(.ha-benefit-icon) { display: block; color: var(--cg-muted); font-size: 13px; line-height: 1.65; }

/* Bốn bước mở trang */
#page-subsite .ha-step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 1rem 0; }
#page-subsite .ha-step {
  min-width: 0; padding: .8rem;
  background: var(--cg-soft, #f7f9fd);
  border: 1px solid var(--cg-line); border-radius: 16px;
  font-size: .86rem; line-height: 1.6;
}
#page-subsite .ha-step-number {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  margin-bottom: 9px; color: #fff; background: var(--cg-primary-fill); border-radius: 9px; font-weight: 750;
}
#page-subsite .ha-step strong { display: block; margin-bottom: 4px; color: var(--cg-text); font-weight: 700; }
#page-subsite code {
  color: var(--cg-primary); background: transparent;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 87.5%;
}

/* Lưới ô nhập 2 cột */
#page-subsite .ha-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#page-subsite .ha-grid > div { min-width: 0; }
#page-subsite .ha-grid .full { grid-column: 1 / -1; }
#page-subsite .ha-label { display: block; margin-bottom: .48rem; color: var(--cg-text); font-size: 1rem; font-weight: 500; line-height: 1.5; }
#page-subsite .ha-input {
  display: inline-block; width: 100%; min-height: 43px; padding: .6rem .75rem;
  color: var(--cg-text); -webkit-text-fill-color: var(--cg-text);
  background: var(--cg-surface, #fff);
  border: 1px solid var(--cg-line-strong); border-radius: 12px;
  font-family: inherit; font-size: 14px; line-height: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#page-subsite .ha-input::placeholder { color: var(--cg-muted); -webkit-text-fill-color: var(--cg-muted); opacity: 1; }
/* Gốc: vòng sáng 2px của glass thắng luật 3px trong trang */
#page-subsite .ha-input:focus { outline: 0; border-color: var(--cg-primary); box-shadow: 0 0 0 2px var(--cg-field-ring, rgba(36,101,189,.12)); }
#page-subsite .ha-help { margin-top: 5px; font-size: 13px; line-height: 1.6; }
#page-subsite .ha-dns-note {
  margin-top: 14px; padding: 12px 14px;
  color: var(--cg-muted); background: var(--cg-blue-soft);
  border: 1px solid var(--ha-note-line); border-radius: 16px;
  font-size: 14px; line-height: 1.6;
}
#page-subsite .ha-dns-note strong { color: var(--cg-text); font-weight: 700; }

/* Nút gửi (.btn.btn-primary: đệm rem của Bootstrap, bo 12 + chữ 14px/500 của glass) */
#page-subsite .ha-btn {
  display: inline-block; min-height: 40px; padding: .625rem 1.25rem;
  color: #fff; background: var(--cg-primary-fill);
  border: 1px solid var(--cg-primary-fill); border-radius: 12px;
  box-shadow: 0 4px 8px rgba(255,255,255,.05);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.5;
  text-align: center; vertical-align: middle; cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#page-subsite .ha-btn:focus { box-shadow: none; }
#page-subsite .ha-btn:active { background-color: #0056ff; border-color: #0052f2; box-shadow: none; }

/* Khung focus bàn phím: dùng luật chung `.content :is(button, a, …):focus-visible` trong base.css */

#page-subsite .ha-empty {
  padding: 22px; text-align: center;
  color: var(--cg-muted); background: var(--cg-soft, #f7f9fd);
  border: 1px dashed var(--cg-line-strong); border-radius: 12px;
}
/* Bản ghi đơn do bản mẫu thêm sau khi gửi — kiểu .ha-record-grid + .ha-status của gốc */
#page-subsite .ha-record {
  display: grid; grid-template-columns: 130px minmax(0, 1fr);
  border: 1px solid var(--cg-line); border-radius: 16px; overflow: hidden;
}
#page-subsite .ha-record > span { padding: 11px 13px; border-bottom: 1px solid var(--cg-line); overflow-wrap: anywhere; }
#page-subsite .ha-record > span:nth-child(odd) { color: var(--cg-muted); background: var(--cg-soft, #f7f9fd); font-weight: 650; }
#page-subsite .ha-record > span:nth-child(even) { min-width: 0; color: var(--cg-text); background: var(--cg-surface, #fff); }
#page-subsite .ha-record > span:nth-last-child(-n+2) { border-bottom: 0; }
#page-subsite .ha-status {
  display: inline-flex; align-items: center; padding: 4px 10px;
  color: var(--cg-muted); background: var(--cg-soft, #f7f9fd);
  border: 1px solid var(--cg-line); border-radius: 999px;
}
#page-subsite .ha-status.pending { color: #b45309; background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .26); }
html.cg-dark #page-subsite .ha-status.pending { color: #f0c76e; }

/* Mốc 960 / 720 / 600 / 575.98 như ceoacc */
@media (max-width: 960px) {
  #page-subsite .ha-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-subsite .ha-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #page-subsite .ha-card-header { padding: .85rem .95rem; }
  #page-subsite .ha-card-body { padding: .95rem; }
  #page-subsite .ha-card-footer { padding: .85rem .95rem; }
  #page-subsite .ha-btn { min-height: 43px; }
  #page-subsite .ha-grid, #page-subsite .ha-benefits-grid { grid-template-columns: 1fr; }
  #page-subsite .ha-record { grid-template-columns: 1fr; }
  #page-subsite .ha-record > span:nth-child(odd) { padding-bottom: 4px; border-bottom: 0; }
  #page-subsite .ha-record > span:nth-child(even) { padding-top: 4px; }
}
@media (max-width: 600px) {
  #page-subsite .ha-card, #page-subsite .ha-hero { border-radius: 20px; }
  #page-subsite .ha-hero h1 { font-size: 22px; }
  #page-subsite .ha-input { font-size: 16px; }
}
@media (max-width: 575.98px) {
  #page-subsite .ha-hero { padding: .9rem .85rem; }
  #page-subsite .ha-card-footer .ha-btn { width: 100%; }
}