@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

/* ================================================================
   SCE Hub — Public CSS  v4.1
   ================================================================ */
:root {
  --or:     #D60000;   /* đỏ thương hiệu GHDNN Express */
  --or-dk:  #A50000;   /* đỏ đậm hover */
  --or-lt:  #FDECEC;   /* đỏ nhạt */
  --red:    #c8191a;
  --red-lt: #fff0f0;
  --dark:   #1a2332;
  --gray:   #5a6a7e;
  --border: #dde3ec;
  --bg:     #f4f6f9;
  --white:  #ffffff;
  --green:  #16a34a;
  --blue:   #1d6ef5;
  --r:      8px;
  --sh:     0 2px 12px rgba(0,0,0,.09);
  --sh2:    0 6px 24px rgba(0,0,0,.13);
}

/* ── Base ──────────────────────────────────────────────────── */
.sce-wrap {
  max-width: 860px;
  margin: 0 auto 48px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--dark);
}

/* ── Form card (kiểu EMS) ──────────────────────────────────── */
.sce-form-card {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 24px;
}
.sce-form-card-title {
  background: var(--dark);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sce-form-card-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}
.sce-form-card-title .sce-title-icon {
  width: 28px; height: 28px;
  background: var(--or);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.sce-form-body { padding: 22px 24px 24px; }

/* ── Field rows ────────────────────────────────────────────── */
.sce-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.sce-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.sce-row.cols-1 { grid-template-columns: 1fr; }
.sce-col-full   { grid-column: 1 / -1; }

.sce-field { display: flex; flex-direction: column; gap: 5px; }
.sce-field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sce-field > label .req { color: var(--or); margin-left: 2px; }

.sce-input,
.sce-select {
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--dark);
  background: var(--white);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.sce-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.sce-input:focus, .sce-select:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(214,0,0,.13);
}
.sce-input::placeholder { color: #b0bac8; }

/* ── Combobox tìm quốc gia (gõ để lọc) ── */
.sce-ac-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(20,30,55,.12);
}
.sce-ac-item {
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--dark);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sce-ac-item:hover,
.sce-ac-item.active {
  background: #fff4ec;
  color: var(--or);
}
.sce-ac-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}
.sce-ac-item mark {
  background: transparent;
  color: var(--or);
  font-weight: 700;
}

/* kích thước dim — input nhỏ hơn */
.sce-dim-hint {
  font-size: 11px;
  color: #9aa5b4;
  margin-top: 2px;
}

/* ── Divider trong form ─────────────────────────────────────── */
.sce-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: #9aa5b4;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sce-divider::before, .sce-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── NOTE box ───────────────────────────────────────────────── */
.sce-note {
  background: #f8fafd;
  border: 1px solid var(--border);
  border-left: 3px solid var(--or);
  border-radius: 6px;
  padding: 9px 13px;
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 18px;
}

/* ================================================================
   BUTTON — CAM ĐẶC CHỮ TRẮNG (specificity cao để override theme)
   ================================================================ */
.sce-wrap .sce-btn,
.sce-section .sce-btn,
button.sce-btn,
a.sce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  font-family: inherit;
  transition: background .15s, box-shadow .15s, transform .12s;
  white-space: nowrap;
  outline: none;
  line-height: 1;
  box-sizing: border-box;
}

/* PRIMARY — đỏ đặc #D60000, chữ trắng */
.sce-wrap .sce-btn-primary,
.sce-section .sce-btn-primary,
button.sce-btn-primary,
a.sce-btn-primary {
  background-color: #D60000 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  height: 48px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(214,0,0,.40) !important;
  letter-spacing: .2px;
}
.sce-wrap .sce-btn-primary:hover,
.sce-section .sce-btn-primary:hover,
button.sce-btn-primary:hover,
a.sce-btn-primary:hover {
  background-color: #c2530a !important;
  box-shadow: 0 5px 18px rgba(214,0,0,.55) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}
.sce-wrap .sce-btn-primary:active,
button.sce-btn-primary:active { transform: translateY(0) !important; box-shadow: none !important; }

.sce-wrap .sce-btn-primary:disabled,
.sce-wrap .sce-btn-primary[disabled],
button.sce-btn-primary:disabled {
  background-color: #fdba74 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: .7;
}

.sce-wrap .sce-btn-full,
button.sce-btn-full { width: 100% !important; }

/* SECONDARY — viền cam, nền trắng */
.sce-btn-secondary {
  background: var(--white);
  color: var(--or) !important;
  border: 1.5px solid var(--or);
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  height: 42px;
  border-radius: var(--r);
}
.sce-btn-secondary:hover { background: var(--or-lt); color: var(--or) !important; }

/* GHOST (tải PDF, Zalo…) */
.sce-btn-ghost {
  background: var(--white);
  color: var(--dark) !important;
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  height: 42px;
  border-radius: var(--r);
}
.sce-btn-ghost:hover { border-color: var(--or); color: var(--or) !important; background: var(--or-lt); }

/* ZALO */
.sce-btn-zalo {
  background: #0068ff;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 0 24px;
  height: 44px;
  border-radius: var(--r);
  box-shadow: 0 3px 10px rgba(0,104,255,.28);
}
.sce-btn-zalo:hover { background: #0053cc; color: #fff !important; }

/* Loading spinner */
.sce-btn-loading { position: relative; pointer-events: none; opacity: .8; }
.sce-btn-loading::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sce-spin .65s linear infinite;
}
@keyframes sce-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ================================================================
   KẾT QUẢ GIÁ CƯỚC
   ================================================================ */
.sce-result-section { margin-top: 28px; }
.sce-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sce-result-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.sce-result-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Mỗi dòng kết quả = 1 card ngang */
.sce-rate-list { display: flex; flex-direction: column; gap: 10px; }

.sce-rate-row {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 180px 1fr auto auto;
  align-items: center;
  gap: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.sce-rate-row:hover  { border-color: var(--or); box-shadow: 0 0 0 3px rgba(214,0,0,.10); }
.sce-rate-row.best   { border-color: var(--or); background: var(--or-lt); }

/* Col 1 — dịch vụ */
.sce-rr-service { }
.sce-rr-name { font-size: 14px; font-weight: 700; color: var(--dark); }
.sce-rr-mode { font-size: 12px; color: var(--gray); margin-top: 3px; }
.sce-rr-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--or);
  color: #fff;
  margin-top: 4px;
}

/* Col 2 — chi tiết */
.sce-rr-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.sce-rr-meta-item { font-size: 12.5px; color: var(--gray); }
.sce-rr-meta-item strong { color: var(--dark); font-weight: 600; }

/* Col 3 — giá — 1 HÀNG DUY NHẤT */
.sce-rr-price {
  text-align: right;
  white-space: nowrap;
}
.sce-rr-price-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.sce-rr-price-unit {
  font-size: 12px;
  font-weight: 600;
  color: #9aa5b4;
  margin-left: 3px;
  vertical-align: super;
}

/* Col 4 — nút */
.sce-rr-action { }

/* ── ORDER FORM ─────────────────────────────────────────────── */
.sce-summary-bar {
  background: linear-gradient(90deg, #1a2332 0%, #2d3f55 100%);
  border-radius: var(--r);
  padding: 14px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sce-summary-bar-info { flex: 1; }
.sce-summary-bar-svc  { font-size: 14px; font-weight: 700; color: #fff; }
.sce-summary-bar-det  { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.sce-summary-bar-price{ font-size: 22px; font-weight: 800; color: var(--or); white-space: nowrap; }

/* ── SUCCESS ────────────────────────────────────────────────── */
.sce-success-wrap { text-align: center; padding: 36px 20px; }
.sce-success-icon { font-size: 52px; margin-bottom: 12px; }
.sce-success-wrap h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--dark); }
.sce-success-wrap p  { font-size: 14px; color: var(--gray); margin: 0 0 18px; }
.sce-tracking-code {
  display: inline-block;
  background: var(--dark);
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 3px;
  padding: 11px 28px;
  border-radius: 8px;
  margin: 8px 0 22px;
}
.sce-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sce-success-sep { border: none; border-top: 1px dashed var(--border); margin: 22px 0 16px; }

/* ── TRACKING ────────────────────────────────────────────────── */
.sce-track-row {
  display: flex;
  gap: 10px;
}
.sce-track-row .sce-input {
  flex: 1;
  font-size: 15px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1.5px;
}

.sce-track-meta {
  background: var(--bg);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 13px;
}
.sce-track-meta table { width: 100%; border-collapse: collapse; }
.sce-track-meta td { padding: 4px 0; vertical-align: top; }
.sce-track-meta td:first-child { color: var(--gray); font-weight: 600; width: 130px; }
.sce-track-meta td:last-child  { font-weight: 700; color: var(--dark); }

.sce-timeline { list-style: none; margin: 0; padding: 0; }
.sce-tl-item {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  position: relative;
}
.sce-tl-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px; top: 34px; bottom: 0;
  width: 2px;
  background: var(--border);
}
.sce-tl-item.cur::after { background: var(--or); }
.sce-tl-dot {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  z-index: 1;
}
.sce-tl-item.cur .sce-tl-dot { border-color: var(--or); background: var(--or-lt); }
.sce-tl-body { flex: 1; padding-top: 3px; }
.sce-tl-status  { font-size: 13.5px; font-weight: 700; color: var(--dark); }
.sce-tl-item.cur .sce-tl-status { color: var(--or); }
.sce-tl-loc  { font-size: 12px; color: var(--gray); margin-top: 2px; }
.sce-tl-desc { font-size: 12px; color: #9aa5b4; margin-top: 2px; }
.sce-tl-time { font-size: 11px; color: #9aa5b4; margin-top: 4px; font-family: monospace; }

/* ── Alert ──────────────────────────────────────────────────── */
.sce-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 15px;
  border-radius: var(--r);
  font-size: 13.5px;
  margin-top: 14px;
  animation: sce-fade .2s ease;
}
.sce-alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.sce-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
@keyframes sce-fade { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 660px) {
  .sce-row            { grid-template-columns: 1fr; }
  .sce-row.cols-3     { grid-template-columns: 1fr; }
  .sce-col-full       { grid-column: 1; }
  .sce-rate-row       { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .sce-rr-service     { grid-column: 1; }
  .sce-rr-price       { grid-column: 2; text-align: right; }
  .sce-rr-meta        { grid-column: 1 / -1; }
  .sce-rr-action      { grid-column: 1 / -1; }
  .sce-rr-action .sce-btn { width: 100%; }
  .sce-form-body      { padding: 16px; }
  .sce-track-row      { flex-direction: column; }
  .sce-summary-bar    { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sce-success-actions{ flex-direction: column; align-items: center; }
}

/* ================================================================
   BUTTON OVERRIDE - đảm bảo màu cam hiển thị dù theme nào
   ================================================================ */
.sce-wrap .sce-btn-primary,
.sce-section .sce-btn-primary,
button.sce-btn-primary,
input[type="submit"].sce-btn-primary,
a.sce-btn-primary {
  background-color: #D60000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(214,0,0,.38) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .15s, transform .12s !important;
}
.sce-wrap .sce-btn-primary:hover,
button.sce-btn-primary:hover,
a.sce-btn-primary:hover {
  background-color: #c2530a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(214,0,0,.48) !important;
}
.sce-wrap .sce-btn-primary:active,
button.sce-btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.sce-wrap .sce-btn-primary:disabled,
button.sce-btn-primary:disabled {
  background-color: #fdba74 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Nút tra cứu full width */
.sce-btn-full { width: 100% !important; }