/* page-social-boost — dựng theo client_order-service.html / guest_client_order-service.html của ceoacc.
   Số đo lấy từ getComputedStyle bản gốc; mọi luật gói trong #page-social-boost. */
#page-social-boost {
  --sv-primary: #3268f2;
  --sv-ink: #152238;
  --sv-muted: #67758d;
  --sv-row-line: #edf1f7;
  --sv-input-line: #d7dfeb;
  --sv-select-bg: #fbfcff;
  --sv-btn-line: #d4dfed;
  --sv-mode-active: #3378ff;
  --sv-total-bg: linear-gradient(135deg, #f7faff, #eef5ff);
  --sv-total-line: #b9d4ff;
  --sv-total-ink: #213446;
  --sv-guest-bg: #f2f7ff;
  --sv-guest-line: #cfe1ff;
  --sv-guest-ink: #244b88;
  --sv-hero-copy: #586a82;
  --sv-caret: #343a40;
}
@media (max-width: 767.98px) {
  /* ceoacc: riêng .sv-shop .container-fluid lề 10px (khung chung .content lề 15px) */
  #page-social-boost { margin: 0 -5px; }
}
html.cg-dark #page-social-boost {
  --sv-primary: #8bbcff;
  --sv-ink: var(--cg-text);
  --sv-muted: var(--cg-muted);
  --sv-row-line: var(--cg-line);
  --sv-input-line: #3a4a60;
  --sv-select-bg: var(--cg-surface);
  --sv-btn-line: #3a4a60;
  --sv-mode-active: #8bbcff;
  --sv-total-bg: #1b2c45;
  --sv-total-line: #2f4d78;
  --sv-total-ink: var(--cg-text);
  --sv-guest-bg: #1b2c45;
  --sv-guest-line: #2f4d78;
  --sv-guest-ink: #b9d4ff;
  --sv-hero-copy: var(--cg-muted);
  --sv-caret: var(--cg-muted);
}

/* ---------- Thẻ chung (giống .card của ceo-glass) ---------- */
#page-social-boost .card.sv-hero,
#page-social-boost .card.sv-order-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  line-height: 1.6;
  border: 1px solid var(--cg-line);
  border-radius: 24px;
  box-shadow: var(--cg-shadow);
}

/* ---------- Hero ---------- */
#page-social-boost .card.sv-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
  color: var(--cg-text);
  background: linear-gradient(135deg, var(--cg-surface) 35%, var(--cg-blue-soft));
}
#page-social-boost .sv-hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -80px;
  bottom: -135px;
  border: 38px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}
#page-social-boost .sv-hero-body { position: relative; z-index: 1; padding: 20px; }
#page-social-boost .sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  padding: 5px 10px;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: var(--cg-blue-soft);
  color: var(--cg-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
#page-social-boost .sv-hero i { color: var(--cg-primary); }
#page-social-boost .sv-hero h1 {
  margin: 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: var(--cg-text);
}
#page-social-boost .sv-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--sv-hero-copy);
  font-size: 13px;
  line-height: 1.7;
}
#page-social-boost .sv-benefits { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
#page-social-boost .sv-benefit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 12px;
  color: var(--sv-hero-copy);
  background: var(--cg-soft);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- Thông báo bản khách ---------- */
#page-social-boost .sv-guest-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 8.8px 16px;
  border: 1px solid var(--sv-guest-line);
  border-radius: 20px;
  color: var(--sv-guest-ink);
  background: var(--sv-guest-bg);
  line-height: 1.55;
}
#page-social-boost .sv-guest-alert[hidden] { display: none; }
#page-social-boost .sv-guest-alert strong { font-weight: 700; }
#page-social-boost .sv-guest-actions { display: flex; gap: 4px; }
#page-social-boost .sv-btn-sm {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--sv-btn-line);
  border-radius: 10px;
  background: transparent;
  color: var(--cg-primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}
#page-social-boost .sv-btn-sm i { margin-right: 5px; }
#page-social-boost .sv-btn-sm-primary {
  background: #2465bd;
  border-color: #2465bd;
  color: #fff;
  box-shadow: 0 4px 8px rgba(255, 255, 255, .05);
}
#page-social-boost .sv-btn-sm-primary i { color: #fff; }

/* ---------- Thẻ đặt đơn ---------- */
#page-social-boost .card.sv-order-card {
  margin-bottom: 30px;
  overflow: visible;
  background: linear-gradient(155deg, var(--cg-surface) 65%, var(--cg-soft));
}
#page-social-boost .sv-order-body { padding: 20px; color: var(--cg-text); }

/* Hai nút tab lớn: tab đang chọn = nền xanh đặc, tab còn lại = viền */
#page-social-boost .sv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
#page-social-boost .sv-tab {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: .625rem 1.25rem;
  border: 1px solid var(--sv-btn-line);
  border-radius: 12px;
  background: transparent;
  color: var(--cg-primary);
  font: inherit;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
#page-social-boost .sv-tab i { margin-right: 5px; }
#page-social-boost .sv-tab:hover { border-color: #2465bd; background: var(--cg-blue-soft); }
#page-social-boost .sv-tab.active:hover { background: #2465bd; }
#page-social-boost .sv-tab.active {
  background: #2465bd;
  border-color: #2465bd;
  color: #fff;
  font-family: inherit;
  box-shadow: 0 4px 8px rgba(255, 255, 255, .05);
}

/* Hàng form: nhãn trái 1/3, ô phải 2/3 */
#page-social-boost .sv-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-row-line);
}
#page-social-boost .sv-row[hidden] { display: none; }
#page-social-boost .sv-row.sv-row-top { align-items: stretch; }
#page-social-boost .sv-col-label-wrap,
#page-social-boost .sv-row-top > .sv-col-label { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 15px; }
#page-social-boost .sv-col-field { flex: 0 0 66.6667%; max-width: 66.6667%; padding: 0 15px; min-width: 0; }
#page-social-boost .sv-col-label {
  display: inline-block;
  padding: calc(.625rem + 1px) 0;
  color: var(--sv-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}
#page-social-boost .sv-row-top > .sv-col-label { display: block; padding: calc(.625rem + 1px) 15px; }
/* Hàng ghi chú: nhãn là chữ thường trong cột trái (không phải label) */
#page-social-boost .sv-note-label { color: var(--cg-text); }

/* Ô chọn kiểu select2 */
#page-social-boost .sv-select2 { position: relative; }
#page-social-boost .sv-select2 select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 20px 9px 12px;
  border: 1px solid var(--sv-input-line);
  border-radius: 10px;
  background: var(--sv-select-bg);
  color: #495057;
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
}
html.cg-dark #page-social-boost .sv-select2 select { color: var(--cg-text); }
/* Bản gốc (select2 của ceoacc) không hiện mũi tên trong ô chọn */
#page-social-boost .sv-control {
  display: block;
  width: 100%;
  height: 46px;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border: 1px solid var(--sv-input-line);
  border-radius: 10px;
  background: var(--cg-surface);
  color: var(--cg-text);
  font: inherit;
  font-size: 14px;
  line-height: 45px;
  transition: border-color .15s, box-shadow .15s;
}
#page-social-boost .sv-control::placeholder { color: #6c757d; }
html.cg-dark #page-social-boost .sv-control::placeholder { color: var(--cg-muted); }
#page-social-boost .sv-textarea { height: auto; resize: vertical; }
/* Ô bình luận (#comment, #mentionUsernames của ceoacc): cao cố định 90px, chữ 14px kể cả trên điện thoại */
#page-social-boost .sv-control.sv-textarea-comment {
  height: 90px; min-height: 90px; padding: 8px 12px; font-size: 14px; line-height: 18px; resize: vertical;
}
#page-social-boost .sv-select2 select:focus,
#page-social-boost .sv-control:focus {
  outline: none;
  border-color: var(--sv-primary);
  box-shadow: 0 0 0 3px rgba(50, 104, 242, .12);
}
#page-social-boost .sv-help { display: block; margin-top: 4px; color: var(--sv-muted); font-size: 12px; }
/* .alert.alert-warning của ceoacc */
#page-social-boost .sv-note {
  margin-bottom: 1rem;
  padding: .55rem 1rem;
  border: 1px solid #b86a05;
  border-radius: 20px;
  background: #f8e5cd;
  color: #724203;
  font-size: 14px;
  line-height: 1.6;
}
/* Thông báo chờ (.alert.bg-white.alert-primary: viền 2px) */
#page-social-boost .sv-alert-wait {
  display: flex;
  align-items: stretch;
  margin-bottom: 1rem;
  padding: .55rem 1rem;
  border: 2px solid var(--cg-line);
  border-radius: 20px;
  background: var(--cg-blue-soft);
  color: #212529;
  line-height: 1.6;
}
#page-social-boost .sv-alert-wait i { display: block; margin-right: .3125rem; }
html.cg-dark #page-social-boost .sv-alert-wait { color: var(--cg-text); }
html.cg-dark #page-social-boost .sv-note { background: #3b301c; border-color: #745a25; color: #ffe7ae; }
#page-social-boost #sv_msg_wait[hidden] { display: none; }

/* Kiểu đặt: nhóm 2 nút dính nhau */
#page-social-boost .sv-mode { display: inline-flex; width: 100%; }
#page-social-boost .sv-mode-btn {
  position: relative;
  flex: 1 1 auto;
  min-height: 42px;
  padding: .625rem 1.25rem;
  border: 1px solid var(--sv-btn-line);
  background: transparent;
  color: var(--cg-primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: center;
  cursor: pointer;
}
#page-social-boost .sv-mode-btn:first-child { border-radius: 10px 0 0 10px; }
#page-social-boost .sv-mode-btn:last-child { border-radius: 0 10px 10px 0; margin-left: -1px; }
#page-social-boost .sv-mode-btn.active {
  z-index: 1;
  border-color: var(--sv-mode-active);
  background: rgba(51, 120, 255, .1);
  color: var(--sv-mode-active);
}
#page-social-boost .sv-mode-btn:hover { z-index: 1; border-color: #2465bd; background: var(--cg-blue-soft); }
#page-social-boost .sv-mode-btn.active:hover { background: rgba(51, 120, 255, .1); border-color: var(--sv-mode-active); }
#page-social-boost .sv-mode-btn input { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
#page-social-boost .sv-mode-btn:focus-within { box-shadow: 0 0 0 3px rgba(50, 104, 242, .12); }

#page-social-boost .sv-min-max { margin: 0 0 1rem; font-size: 14px; }

/* Ô tóm tắt thanh toán */
#page-social-boost .sv-total-box {
  margin: 20px 0 4px;
  padding: .55rem 1rem;
  border: 1px solid var(--sv-total-line);
  border-radius: 20px;
  color: #212529;
  background: var(--sv-total-bg);
  text-align: center;
}
#page-social-boost .sv-total-body { padding: 18px; }
#page-social-boost .sv-total-label {
  display: block;
  margin-bottom: 4px;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#page-social-boost .sv-total-box h5 {
  margin: 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sv-total-ink);
}
#page-social-boost #sv_total { color: red; font-size: 25px; font-weight: 900; line-height: 30px; }
html.cg-dark #page-social-boost #sv_total { color: #ff6b6b; }
#page-social-boost .sv-submit-wrap { text-align: center; }
#page-social-boost .sv-submit {
  display: inline-block;
  min-width: 220px;
  min-height: 48px;
  margin-top: 10px;
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #3268f2, #1d8ee8);
  box-shadow: 0 10px 22px rgba(50, 104, 242, .24);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 21px;
  cursor: pointer;
}
#page-social-boost .sv-submit i { margin-right: 5px; color: #fff; }
/* Bản khách: nút là liên kết đăng nhập (a.btn) nên dùng phông tiêu đề 500 như bản gốc */
#page-social-boost .sv-submit.sv-submit-guest { background: #2465bd linear-gradient(135deg, #3268f2, #1d8ee8); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; }


#page-social-boost .sv-form[hidden] { display: none; }

/* ---------- Khổ nhỏ ---------- */
@media (max-width: 991px) {
  #page-social-boost .sv-row,
  #page-social-boost .sv-row.sv-row-top { flex-wrap: wrap; }
  #page-social-boost .sv-col-label-wrap,
  #page-social-boost .sv-row-top > .sv-col-label,
  #page-social-boost .sv-col-field { flex-basis: 100%; max-width: 100%; }
  #page-social-boost .sv-col-label-wrap:empty { display: none; }
}
@media (max-width: 767.98px) {
  #page-social-boost .sv-tabs { grid-template-columns: 1fr; gap: 8px; }
  #page-social-boost .sv-row { padding: 7px 0 11px; }
  #page-social-boost .sv-submit { width: 100%; min-width: 0; }
  #page-social-boost .sv-guest-actions { margin-top: 8px; flex-wrap: wrap; }
}
/* ceo-glass ≤600px: thẻ bo 20, thân thẻ đệm 16, tiêu đề 22px, ô nhập chữ 16px */
@media (max-width: 600px) {
  #page-social-boost .card.sv-hero, #page-social-boost .card.sv-order-card { border-radius: 20px; }
  #page-social-boost .sv-hero-body, #page-social-boost .sv-order-body { padding: 16px; }
  #page-social-boost .sv-hero h1 { font-size: 22px; }
  #page-social-boost .sv-control:not(.sv-textarea-comment) { font-size: 16px; }
}