/* ==========================================================================
   SILVERLIFE DESIGN SYSTEM - KHU VUC TAI KHOAN (/my-account/ + endpoints)
   Scope: .sl-account-page (trang) va .sl-account-lightbox (popup dang nhap).
   Tokens/component chung (.cat-page/.cat-hero/.cat-btn-*) den tu
   render_sl_faq_global_css() (sec_faq.php).
   ========================================================================== */

/* ---------- Fix icon FontAwesome ----------
   .cat-page * { font-family: ... !important } (tu design system) de lenh
   font cua icon .fas/.far/.fab, lam icon hien thi thanh o trong /my-account.
   Ghi de bang specificity cao hon de icon hien lai dung. */
.sl-account-page .fas,
.sl-account-page .fa-solid,
.sl-account-page .far,
.sl-account-page .fa-regular,
.sl-account-page .fab,
.sl-account-page .fa-brands,
.sl-account-lightbox .fas,
.sl-account-lightbox .fa-solid,
.sl-account-lightbox .far,
.sl-account-lightbox .fa-regular,
.sl-account-lightbox .fab,
.sl-account-lightbox .fa-brands,
.sl-login-wrap .fas,
.sl-login-wrap .fa-solid,
.sl-login-wrap .far,
.sl-login-wrap .fa-regular,
.sl-login-wrap .fab,
.sl-login-wrap .fa-brands {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.sl-account-page .fab,
.sl-account-page .fa-brands,
.sl-account-lightbox .fab,
.sl-account-lightbox .fa-brands,
.sl-login-wrap .fab,
.sl-login-wrap .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* ---------- Button .cat-btn-solid / .cat-btn-ghost ----------
   Trong DS (.cat-btn-solid/.cat-btn-ghost) chi co mau nen/border; phan
   padding/radius/font nam o .cat-contact-actions a. Khi dung standalone
   (empty state, form submit, ...) can du base button styling nay. */
.sl-account-page .cat-btn-solid,
.sl-account-lightbox .cat-btn-solid,
.sl-login-wrap .cat-btn-solid,
.sl-account-page .cat-btn-ghost,
.sl-account-lightbox .cat-btn-ghost,
.sl-login-wrap .cat-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 34px !important;
  border-radius: 99px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Ghost button tren nen sang (account page la background light) */
.sl-account-page .cat-btn-ghost,
.sl-account-lightbox .cat-btn-ghost {
  background: #FFFFFF !important;
  color: var(--sl-forest-900, #102615) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

.sl-account-page .cat-btn-ghost:hover,
.sl-account-lightbox .cat-btn-ghost:hover {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  border-color: #F7DF9B !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.35) !important;
}


/* ---------- Layout tong the ---------- */
.sl-account-hero {
  padding: 48px 6vw 54px !important;
}

.sl-account-body {
  background: transparent !important;
  padding: 40px 0 20px !important;
}

.sl-account-grid {
  display: grid !important;
  grid-template-columns: 292px minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.sl-account-sidebar {
  position: sticky !important;
  top: 96px !important;
  display: grid !important;
  gap: 18px !important;
  align-self: start !important;
}

.sl-account-content {
  min-width: 0 !important;
}

.sl-account-content--narrow {
  max-width: 640px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.sl-account-contact {
  margin-top: 56px !important;
}

/* ---------- The ho so (profile) ---------- */
.sl-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 22px 20px !important;
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF6ED 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px -18px rgba(16, 38, 21, 0.18) !important;
}

.sl-profile-avatar {
  flex: 0 0 auto !important;
}

.sl-profile-avatar img {
  width: 74px !important;
  height: 74px !important;
  max-width: none !important;
  border-radius: 50% !important;
  border: 3px solid var(--sl-gold-300, #F7DF9B) !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
  object-fit: cover !important;
}

.sl-profile-info {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.sl-profile-name {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

.sl-profile-meta,
.sl-profile-since {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  color: var(--sl-ink-600, #575249) !important;
}

.sl-profile-orders {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
  margin-top: 4px !important;
}

.sl-profile-orders i {
  color: var(--sl-gold-500, #D4AF37) !important;
  margin-right: 5px !important;
}

/* ---------- Sidebar navigation ---------- */
.sl-account-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px !important;
  display: grid !important;
  gap: 6px !important;
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF6ED 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px -18px rgba(16, 38, 21, 0.14) !important;
}

.sl-account-nav li {
  margin: 0 !important;
  padding: 0 !important;
}

.sl-account-nav li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--sl-forest-900, #102615) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.sl-account-nav li a:hover {
  background: #FFFFFF !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  transform: translateX(3px) !important;
}

.sl-account-nav li.is-active a,
.sl-account-nav li.active a {
  background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-weight: 800 !important;
  border-color: var(--sl-gold-300, #F7DF9B) !important;
  box-shadow: 0 8px 20px -6px rgba(16, 38, 21, 0.4) !important;
}

.sl-nav-ic {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(199, 166, 92, 0.14) !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  font-size: 13px !important;
  transition: all 0.22s ease !important;
}

.sl-account-nav li a:hover .sl-nav-ic {
  background: rgba(122, 28, 28, 0.1) !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.sl-account-nav li.is-active a .sl-nav-ic,
.sl-account-nav li.active a .sl-nav-ic {
  background: rgba(247, 223, 155, 0.22) !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
}

.sl-nav-label {
  flex: 1 1 auto !important;
}

/* ---------- Card chung ---------- */
.sl-account-card,
.sl-account-table-card {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.16) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.sl-account-card {
  padding: 26px 28px !important;
}

.sl-account-card-title,
.sl-table-card-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.sl-account-card-title i,
.sl-table-card-title i {
  color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-table-card-head {
  padding: 18px 22px !important;
  background: linear-gradient(135deg, var(--sl-forest-900, #102615) 0%, var(--sl-forest-950, #091d16) 100%) !important;
}

.sl-table-card-head .sl-table-card-title {
  color: var(--sl-gold-300, #F7DF9B) !important;
  margin: 0 !important;
}

.sl-table-card-head .sl-table-card-title i {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

/* ---------- Form ---------- */
.sl-account-form .form-row,
.sl-account-form p.form-row {
  margin: 0 0 16px !important;
}

.sl-account-form label {
  display: block !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  margin-bottom: 7px !important;
}

.sl-account-form label .required {
  color: var(--sl-maple-600, #7A1C1C) !important;
  border: none !important;
}

.sl-account-form input.input-text,
.sl-account-form input[type="text"],
.sl-account-form input[type="email"],
.sl-account-form input[type="password"],
.sl-account-form input[type="tel"],
.sl-account-form input[type="number"],
.sl-account-form select,
.sl-account-form textarea {
  width: 100% !important;
  height: 46px !important;
  line-height: 1.4 !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.4) !important;
  background: #FFFFFF !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  padding: 0 14px !important;
  box-shadow: 0 2px 6px rgba(16, 38, 21, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sl-account-form textarea {
  height: auto !important;
  min-height: 90px !important;
  padding: 12px 14px !important;
}

.sl-account-form input.input-text:focus,
.sl-account-form input[type="text"]:focus,
.sl-account-form input[type="email"]:focus,
.sl-account-form input[type="password"]:focus,
.sl-account-form input[type="tel"]:focus,
.sl-account-form input[type="number"]:focus,
.sl-account-form select:focus,
.sl-account-form textarea:focus {
  border-color: var(--sl-gold-500, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
  outline: none !important;
}

.sl-account-form input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  accent-color: var(--sl-gold-500, #D4AF37) !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

.sl-form-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 18px !important;
}

.sl-form-row-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.sl-form-row-submit .sl-remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.sl-form-row-submit .cat-btn-solid {
  min-width: 170px !important;
  justify-content: center !important;
}

.sl-account-form .lost_password a {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
  text-decoration: none !important;
}

.sl-account-form .lost_password a:hover {
  color: var(--sl-forest-800, #164627) !important;
}

.sl-form-actions {
  margin-top: 22px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.sl-form-actions .cat-btn-solid,
.sl-form-actions .cat-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sl-register-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--sl-cream-100, #F8F4EA) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: var(--sl-ink-600, #575249) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
}

.sl-register-note i {
  color: var(--sl-gold-500, #D4AF37) !important;
  margin-top: 3px !important;
}

.sl-account-fieldset {
  margin: 24px 0 0 !important;
  padding: 20px 20px 4px !important;
  border: 1.5px dashed rgba(199, 166, 92, 0.45) !important;
  border-radius: 14px !important;
  background: rgba(248, 244, 234, 0.5) !important;
}

.sl-account-fieldset legend {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  padding: 0 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.sl-account-fieldset legend i {
  color: var(--sl-gold-500, #D4AF37) !important;
  margin-right: 6px !important;
}

/* ---------- Tabs login/register ---------- */
.sl-login-wrap {
  max-width: 640px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.sl-login-card {
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF6ED 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -24px rgba(16, 38, 21, 0.28) !important;
  overflow: hidden !important;
  padding: 30px 34px 34px !important;
}

.sl-tabs {
  display: flex !important;
  gap: 8px !important;
  padding: 6px !important;
  background: rgba(199, 166, 92, 0.12) !important;
  border: 1px solid rgba(199, 166, 92, 0.28) !important;
  border-radius: 99px !important;
  margin: 0 0 26px !important;
}

.sl-tab {
  flex: 1 1 0 !important;
  border: none !important;
  margin: 0 !important; /* Reset margin kế thừa từ global button (Flatsome: 0 14px 14px 0) — nếu không, margin-bottom đẩy cao pill .sl-tabs tạo khoảng trống dưới button */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-radius: 99px !important;
  background: transparent !important;
  color: var(--sl-ink-600, #575249) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: all 0.22s ease !important;
}

.sl-tab:hover {
  color: var(--sl-forest-900, #102615) !important;
}

.sl-tab.is-active {
  background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  box-shadow: 0 8px 20px -8px rgba(16, 38, 21, 0.5) !important;
}

.sl-tab-panel {
  display: none !important;
}

.sl-tab-panel.is-active {
  display: block !important;
}

.sl-panel-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sl-panel-sub {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-600, #575249) !important;
  margin: 0 0 22px !important;
}

/* ---------- Dashboard ---------- */
.sl-dash-hello {
  margin-bottom: 26px !important;
}

.sl-dash-eyebrow {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-dash-name {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 6px 0 10px !important;
}

.sl-dash-hello p {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sl-ink-600, #575249) !important;
  max-width: 620px !important;
  margin: 0 !important;
}

.sl-dash-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 26px !important;
}

.sl-dash-stat {
  display: grid !important;
  gap: 4px !important;
  padding: 20px !important;
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -14px rgba(16, 38, 21, 0.14) !important;
  text-align: center !important;
}

.sl-dash-stat-ic {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 6px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35) !important;
}

.sl-dash-stat-val {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  line-height: 1.1 !important;
}

.sl-dash-stat-label {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--sl-ink-600, #575249) !important;
}

.sl-dash-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 26px !important;
}

.sl-dash-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -14px rgba(16, 38, 21, 0.12) !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.sl-dash-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--sl-gold-500, #D4AF37) !important;
  box-shadow: 0 16px 34px -14px rgba(212, 175, 55, 0.3) !important;
}

.sl-dash-card-ic {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(199, 166, 92, 0.14) !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  font-size: 18px !important;
}

.sl-dash-card-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.sl-dash-card-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--sl-forest-900, #102615) !important;
}

.sl-dash-card-desc {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--sl-ink-600, #575249) !important;
}

.sl-dash-card-arrow {
  flex: 0 0 auto !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  font-size: 13px !important;
  transition: transform 0.2s ease !important;
}

.sl-dash-card:hover .sl-dash-card-arrow {
  transform: translateX(4px) !important;
}

/* ---------- Don hang gan nhat (dashboard-links) ---------- */
.sl-dash-recent {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.16) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.sl-dash-recent-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, var(--sl-forest-900, #102615) 0%, var(--sl-forest-950, #091d16) 100%) !important;
}

.sl-dash-recent-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.sl-dash-recent-all {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.sl-dash-recent-all i {
  font-size: 11px !important;
  margin-left: 4px !important;
}

.sl-dash-recent-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-dash-recent-item {
  border-bottom: 1px solid rgba(199, 166, 92, 0.16) !important;
}

.sl-dash-recent-item:last-child {
  border-bottom: none !important;
}

.sl-dash-recent-item a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 20px !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.sl-dash-recent-item a:hover {
  background: var(--sl-cream-100, #F8F4EA) !important;
}

.sl-dash-recent-no {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--sl-forest-900, #102615) !important;
  min-width: 90px !important;
}

.sl-dash-recent-date {
  flex: 1 1 auto !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  color: var(--sl-ink-600, #575249) !important;
}

.sl-dash-recent-total {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
}

/* ---------- Bang don hang (orders/payment) ---------- */
.sl-orders-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

.sl-orders-table thead tr {
  background: linear-gradient(135deg, var(--sl-forest-900, #102615) 0%, var(--sl-forest-950, #091d16) 100%) !important;
}

.sl-orders-table thead th {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 15px 16px !important;
  border: none !important;
}

.sl-orders-table tbody tr {
  border-bottom: 1px solid rgba(199, 166, 92, 0.16) !important;
  transition: background-color 0.2s ease !important;
}

.sl-orders-table tbody tr:hover {
  background-color: var(--sl-cream-100, #F8F4EA) !important;
}

.sl-orders-table tbody td,
.sl-orders-table tbody th {
  padding: 15px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.12) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
}

.sl-orders-table tbody tr:last-child td,
.sl-orders-table tbody tr:last-child th {
  border-bottom: none !important;
}

.sl-order-number {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--sl-forest-900, #102615) !important;
  text-decoration: none !important;
}

.sl-order-number:hover {
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.sl-order-total {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.sl-account-page .sl-order-action {
  font-size: 12.5px !important;
  padding: 8px 18px !important;
}

.sl-orders-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

/* ---------- Trang thai don hang ---------- */
.sl-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 99px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.sl-status i {
  font-size: 7px !important;
}

.sl-status--completed {
  background: rgba(22, 70, 39, 0.1) !important;
  color: #164627 !important;
  border: 1px solid rgba(22, 70, 39, 0.3) !important;
}

.sl-status--processing {
  background: rgba(212, 175, 55, 0.14) !important;
  color: #8a6d1d !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
}

.sl-status--on-hold,
.sl-status--pending,
.sl-status--pending-payment {
  background: rgba(199, 166, 92, 0.12) !important;
  color: #7a6a3a !important;
  border: 1px solid rgba(199, 166, 92, 0.4) !important;
}

.sl-status--cancelled,
.sl-status--failed,
.sl-status--refunded {
  background: rgba(122, 28, 28, 0.08) !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
  border: 1px solid rgba(122, 28, 28, 0.3) !important;
}

/* ---------- Dia chi (addresses) ---------- */
.sl-address-intro {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-600, #575249) !important;
  margin: 0 0 20px !important;
}

.sl-address-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.sl-address-card {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.14) !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.sl-address-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sl-address-card-ic {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(199, 166, 92, 0.14) !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  font-size: 16px !important;
}

.sl-address-card-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 !important;
}

.sl-address-card-body {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-style: normal !important;
  flex: 1 1 auto !important;
}

.sl-address-empty-text {
  color: var(--sl-ink-600, #575249) !important;
  font-style: italic !important;
}

.sl-account-page .sl-address-card-edit {
  align-self: flex-start !important;
  font-size: 12.5px !important;
  padding: 8px 18px !important;
}

/* ---------- Chi tiet don hang ---------- */
.sl-order-detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}

.sl-order-detail-eyebrow {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-order-detail-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 4px 0 8px !important;
}

.sl-gold-text {
  color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-order-detail-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--sl-ink-600, #575249) !important;
}

.sl-order-detail-meta i {
  color: var(--sl-gold-500, #D4AF37) !important;
  margin-right: 5px !important;
}

.sl-account-page .sl-back-btn {
  font-size: 12.5px !important;
  padding: 9px 18px !important;
}

.sl-order-notes {
  padding: 24px !important;
}

.sl-order-notes ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-order-notes li {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.16) !important;
}

.sl-order-notes li:last-child {
  border-bottom: none !important;
}

.sl-order-notes .meta {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  margin: 0 0 6px !important;
}

.sl-order-notes .description p {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  margin: 0 !important;
}

/* Bang chi tiet don hang (woocommerce-order-details) */
.sl-order-detail .woocommerce-order-details,
.sl-order-detail .woocommerce-customer-details {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.16) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  padding: 24px 26px !important;
}

.sl-order-detail .woocommerce-order-details__title,
.sl-order-detail .woocommerce-columns h2,
.sl-order-detail .woocommerce-customer-details h2 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 16px !important;
}

.sl-order-detail .woocommerce-table--order-details,
.sl-order-detail table.shop_table.order_details {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
}

.sl-order-detail .woocommerce-table--order-details thead th,
.sl-order-detail table.order_details thead th {
  background: linear-gradient(135deg, var(--sl-forest-900, #102615) 0%, var(--sl-forest-950, #091d16) 100%) !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  border: none !important;
}

.sl-order-detail .woocommerce-table--order-details td,
.sl-order-detail .woocommerce-table--order-details th,
.sl-order-detail table.order_details td,
.sl-order-detail table.order_details th {
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.12) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
}

.sl-order-detail .woocommerce-column {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  margin-bottom: 0 !important;
}

.sl-order-detail address {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-style: normal !important;
  padding: 0 !important;
  border: none !important;
}

/* ---------- Empty state ---------- */
.sl-account-empty {
  text-align: center !important;
  padding: 54px 28px !important;
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px dashed rgba(199, 166, 92, 0.4) !important;
  border-radius: 16px !important;
}

.sl-account-empty-ic {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(199, 166, 92, 0.14) !important;
  color: var(--sl-gold-500, #D4AF37) !important;
  font-size: 24px !important;
}

.sl-account-empty h3 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 0 10px !important;
}

.sl-account-empty p {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--sl-ink-600, #575249) !important;
  max-width: 420px !important;
  margin: 0 auto 22px !important;
}

.sl-account-empty .cat-btn-solid {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ---------- Lightbox login ---------- */
.sl-account-lightbox {
  background: #FFFFFF !important;
}

.sl-lb-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1.2fr !important;
  min-height: 480px !important;
}

.sl-lb-side {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 48px 42px !important;
  background: linear-gradient(160deg, #091D16 0%, #102615 60%, #164627 100%) !important;
  overflow: hidden !important;
}

.sl-lb-side::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.2), transparent 70%) !important;
  pointer-events: none !important;
}

.sl-lb-side-tag {
  position: relative !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  background: rgba(16, 38, 21, 0.7) !important;
  border: 1px solid rgba(247, 223, 155, 0.4) !important;
  padding: 6px 18px !important;
  border-radius: 99px !important;
}

.sl-lb-side-title {
  position: relative !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 900 !important;
  color: #F7DF9B !important;
  margin: 8px 0 0 !important;
  line-height: 1.3 !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFEBAA 30%, #F7DF9B 65%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.sl-lb-side-text {
  position: relative !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #e7e3da !important;
  margin: 0 0 10px !important;
  max-width: 340px !important;
}

.sl-lb-side-btn {
  position: relative !important;
  font-size: 13.5px !important;
}

.sl-lb-side-gold {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #D4AF37, #F7DF9B, #D4AF37) !important;
}

.sl-lb-form {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 44px 42px !important;
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF6ED 100%) !important;
}

.sl-lb-form .account-login-inner {
  width: 100% !important;
  max-width: 360px !important;
}

/* ---------- Notices ---------- */
.sl-account-content .woocommerce-message,
.sl-account-content .woocommerce-info,
.sl-account-content .woocommerce-error,
.sl-account-content .woocommerce-notice {
  background: var(--sl-cream-100, #F8F4EA) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

.sl-account-content .woocommerce-error {
  border-color: rgba(122, 28, 28, 0.4) !important;
  background: rgba(122, 28, 28, 0.06) !important;
}

.sl-account-content .woocommerce-message .button,
.sl-account-content .woocommerce-message a,
.sl-account-content .woocommerce-notice a {
  color: var(--sl-maple-600, #7A1C1C) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

/* ---------- Responsive ---------- */

/* Tablet & mobile: sidebar -> tabs sticky, profile thu gon ---------- */
@media (max-width: 849px) {
  .sl-account-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Sidebar biến mất khỏi layout, children (profile + nav) thành flex item
     trực tiếp của .sl-account-grid -> nav sticky dính suốt chiều cao content,
     profile vẫn cuộn theo trang. */
  .sl-account-sidebar {
    display: contents !important;
  }

  .sl-account-nav {
    position: sticky !important;
    top: 66px !important;
    z-index: 40 !important;
    order: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sl-account-content {
    order: 3 !important;
    min-width: 0 !important;
  }

  /* Fade hint hai mép nav: bao hieu con tab phia sau co the scroll */
  .sl-account-nav::before,
  .sl-account-nav::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
  }

  .sl-account-nav::before {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(255, 254, 251, 1) 0%, rgba(255, 254, 251, 0) 100%) !important;
  }

  .sl-account-nav::after {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(255, 254, 251, 1) 0%, rgba(255, 254, 251, 0) 100%) !important;
  }

  .sl-account-nav.has-overflow:not(.at-start)::before {
    opacity: 1 !important;
  }

  .sl-account-nav.has-overflow:not(.at-end)::after {
    opacity: 1 !important;
  }

  /* Profile card -> thanh ngang compact */
  .sl-profile-card {
    padding: 12px 16px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .sl-profile-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-width: 2px !important;
  }

  .sl-profile-name {
    font-size: 15px !important;
  }

  .sl-profile-meta,
  .sl-profile-since {
    font-size: 11.5px !important;
  }

  .sl-profile-orders {
    font-size: 11.5px !important;
    margin-top: 1px !important;
  }

  /* Nav -> strip scroll ngang, snap theo active tab */
  .sl-account-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    scroll-padding: 6px !important;
    gap: 8px !important;
    padding: 8px !important;
    scrollbar-width: none !important;
  }

  .sl-account-nav ul::-webkit-scrollbar {
    display: none !important;
  }

  .sl-account-nav li {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  .sl-account-nav li a {
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    min-height: 44px !important;
  }

  .sl-account-nav li a:hover {
    transform: none !important;
  }

  .sl-account-nav li.is-active a,
  .sl-account-nav li.active a {
    background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
    color: var(--sl-gold-300, #F7DF9B) !important;
    border-color: var(--sl-gold-300, #F7DF9B) !important;
    box-shadow: 0 6px 16px -6px rgba(16, 38, 21, 0.45) !important;
  }

  .sl-account-nav li.is-active a .sl-nav-ic,
  .sl-account-nav li.active a .sl-nav-ic {
    background: rgba(247, 223, 155, 0.22) !important;
    color: var(--sl-gold-300, #F7DF9B) !important;
  }

  .sl-dash-stats,
  .sl-dash-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sl-dash-stat {
    padding: 16px !important;
  }

  .sl-table-card-head {
    padding: 14px 18px !important;
  }

  .sl-lb-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .sl-lb-side {
    min-height: 230px !important;
    padding: 34px 30px !important;
  }
}

/* Tablet nho (<=768px): spacing nhe hon */
@media (max-width: 768px) {
  .sl-account-hero {
    padding: 38px 6vw 44px !important;
  }

  .sl-account-grid {
    gap: 20px !important;
  }
}

/* Phone (<=549px): card-stack bang don hang/downloads, pagination,
   chi tiet don hang go hon */
@media (max-width: 549px) {
  .sl-account-hero {
    padding: 40px 6vw 46px !important;
  }

  .sl-account-body {
    padding: 28px 0 12px !important;
  }

  .sl-account-card {
    padding: 20px 18px !important;
  }

  .sl-login-card {
    padding: 22px 18px 26px !important;
    border-radius: 16px !important;
  }

  .sl-tab {
    padding: 11px 10px !important;
    font-size: 13px !important;
  }

  .sl-form-2col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .sl-dash-stats,
  .sl-dash-grid {
    grid-template-columns: 1fr !important;
  }

  .sl-address-grid {
    grid-template-columns: 1fr !important;
  }

  .sl-lb-form {
    padding: 30px 22px !important;
  }

  .sl-lb-side {
    padding: 28px 24px !important;
  }

  .sl-form-row-submit {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sl-form-row-submit .cat-btn-solid {
    width: 100% !important;
  }

  .sl-dash-recent-item a {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .sl-dash-recent-no {
    min-width: 0 !important;
  }

  .sl-dash-recent-date {
    flex: 0 1 auto !important;
  }

  .sl-dash-recent-total {
    margin-left: auto !important;
  }

  .sl-order-detail-head {
    flex-direction: column !important;
  }

  /* Bang don hang / payment-methods / downloads -> card stack */
  .sl-orders-table,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods,
  .woocommerce-table--order-downloads {
    display: block !important;
    width: 100% !important;
  }

  .sl-orders-table thead,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods thead,
  .woocommerce-table--order-downloads thead {
    display: none !important;
  }

  .sl-orders-table tbody tr,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods tbody tr,
  .woocommerce-table--order-downloads tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    background: var(--sl-ivory-50, #FFFEFB) !important;
    border: 1.5px solid rgba(199, 166, 92, 0.32) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px -16px rgba(16, 38, 21, 0.2) !important;
  }

  .sl-orders-table tbody tr:hover {
    background: var(--sl-cream-100, #F8F4EA) !important;
  }

  .sl-orders-table tbody td,
  .sl-orders-table tbody th,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods tbody td,
  .woocommerce-table--order-downloads tbody td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: none !important;
    font-size: 13.5px !important;
  }

  .sl-orders-table tbody td::before,
  .sl-orders-table tbody th::before,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods tbody td::before,
  .woocommerce-table--order-downloads tbody td::before {
    content: attr(data-title) ":" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--sl-gold-500, #D4AF37) !important;
    margin-bottom: 3px !important;
  }

  .sl-orders-table .woocommerce-orders-table__cell-order-number {
    grid-column: 1 / -1 !important;
    font-size: 15px !important;
  }

  .sl-orders-table .woocommerce-orders-table__cell-order-actions {
    grid-column: 1 / -1 !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(199, 166, 92, 0.4) !important;
  }

  .sl-orders-table .woocommerce-orders-table__cell-order-actions::before,
  .sl-account-page .payment-method-actions::before,
  .woocommerce-table--order-downloads .download-file::before {
    display: none !important;
  }

  .sl-orders-table .woocommerce-orders-table__cell-order-actions .sl-order-action {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
  }

  .sl-account-page .payment-method-actions {
    grid-column: 1 / -1 !important;
  }

  .sl-account-page .payment-method-actions a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px 0 0 !important;
    padding: 10px 16px !important;
    font-size: 12.5px !important;
  }

  .woocommerce-table--order-downloads .download-file {
    grid-column: 1 / -1 !important;
  }

  .woocommerce-table--order-downloads .download-file a.button,
  .woocommerce-table--order-downloads .download-actions a.button,
  .sl-account-page .woocommerce-MyAccount-downloads-file {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
  }

  /* Chi tiet don hang */
  .sl-order-detail .woocommerce-order-details,
  .sl-order-detail .woocommerce-customer-details {
    padding: 18px !important;
  }

  .sl-order-detail .woocommerce-column {
    padding: 18px 16px !important;
    margin-bottom: 16px !important;
  }

  .sl-order-notes {
    padding: 18px !important;
  }

  .sl-order-detail .woocommerce-table--order-details thead th,
  .sl-order-detail table.order_details thead th {
    padding: 11px 12px !important;
    font-size: 11px !important;
  }

  .sl-order-detail .woocommerce-table--order-details td,
  .sl-order-detail .woocommerce-table--order-details th,
  .sl-order-detail table.order_details td,
  .sl-order-detail table.order_details th {
    padding: 11px 12px !important;
    font-size: 13px !important;
  }

  /* Empty state + pagination */
  .sl-account-empty {
    padding: 40px 18px !important;
  }

  .sl-account-empty h3 {
    font-size: 18px !important;
  }

  .sl-account-empty .cat-btn-solid {
    width: 100% !important;
  }

  .sl-orders-pagination {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .sl-orders-pagination .cat-btn-solid,
  .sl-orders-pagination .cat-btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Phone nho (<=375px): tinh chinh cuoi cung, chong zoom iOS */
@media (max-width: 375px) {
  .sl-account-hero {
    padding: 28px 5vw 34px !important;
  }

  .cat-crumb {
    font-size: 12px !important;
  }

  .sl-account-body {
    padding: 24px 0 10px !important;
  }

  .sl-account-card {
    padding: 16px 14px !important;
  }

  .sl-account-card-title,
  .sl-table-card-title {
    font-size: 15.5px !important;
  }

  .sl-table-card-head {
    padding: 12px 14px !important;
  }

  .sl-login-card {
    padding: 20px 14px 24px !important;
  }

  .sl-tabs {
    gap: 5px !important;
    padding: 5px !important;
  }

  .sl-tab {
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
  }

  .sl-account-nav li a {
    padding: 8px 10px !important;
    font-size: 13px !important;
    gap: 8px !important;
  }

  .sl-nav-ic {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .sl-profile-card {
    padding: 10px 12px !important;
  }

  .sl-profile-avatar img {
    width: 38px !important;
    height: 38px !important;
  }

  .sl-dash-name {
    font-size: 22px !important;
  }

  .sl-dash-stat {
    padding: 14px !important;
  }

  .sl-dash-stat-val {
    font-size: 21px !important;
  }

  .sl-dash-card {
    padding: 14px !important;
  }

  .sl-dash-recent-head {
    padding: 14px 16px !important;
  }

  .sl-dash-recent-item a {
    padding: 12px 16px !important;
  }

  .sl-address-card {
    padding: 16px !important;
  }

  .sl-account-form input.input-text,
  .sl-account-form input[type="text"],
  .sl-account-form input[type="email"],
  .sl-account-form input[type="password"],
  .sl-account-form input[type="tel"],
  .sl-account-form input[type="number"],
  .sl-account-form select {
    height: 48px !important;
    font-size: 16px !important;
  }

  .sl-form-row-submit .cat-btn-solid,
  .sl-account-form button[type="submit"] {
    font-size: 13.5px !important;
    padding: 13px 20px !important;
  }

  .sl-account-empty {
    padding: 32px 14px !important;
  }

  .sl-orders-table tbody tr,
  .sl-account-page .shop_table.woocommerce-MyAccount-paymentMethods tbody tr,
  .woocommerce-table--order-downloads tbody tr {
    grid-template-columns: 1fr !important;
    padding: 12px 14px !important;
  }

  .sl-order-detail-title {
    font-size: 20px !important;
  }

  .sl-order-detail-meta {
    gap: 8px 14px !important;
    font-size: 12.5px !important;
  }

  .sl-lb-side {
    min-height: 200px !important;
    padding: 24px 20px !important;
  }

  .sl-lb-form {
    padding: 24px 16px !important;
  }

  .sl-lb-side-title {
    font-size: 22px !important;
  }
}

/* ---------- Mobile: chong tran ngang (overflow) ----------
   Chung cho toan bo khu vuc tai khoan: tables + chuoi dai + lighbox. */
.sl-account-page {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.sl-account-content,
.sl-account-content > * {
  max-width: 100% !important;
}

.sl-account-content img,
.sl-account-content video,
.sl-account-content iframe,
.sl-account-content svg,
.sl-account-content table,
.sl-account-content .woocommerce-order-details,
.sl-account-content .woocommerce-customer-details,
.sl-account-content .woocommerce-order-downloads {
  max-width: 100% !important;
}

.sl-account-content table {
  max-width: 100% !important;
}

.sl-account-content td,
.sl-account-content th,
.sl-account-content address,
.sl-account-content p,
.sl-account-content h2,
.sl-account-content h3,
.sl-account-content h4,
.sl-account-content li {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.sl-address-card-body,
.sl-order-notes .description,
.sl-order-notes .description p,
.sl-account-content .woocommerce-table--order-downloads td {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.sl-account-content .sl-status {
  white-space: normal !important;
}

/* Bang chi tiet don hang (woocommerce-table--order-details):
   thead an, moi dong thanh block, chuyen 2 cot thanh hang doc. */
@media (max-width: 549px) {
  .sl-order-detail .woocommerce-table--order-details thead,
  .sl-order-detail table.order_details thead {
    display: none !important;
  }

  .sl-order-detail .woocommerce-table--order-details,
  .sl-order-detail table.order_details {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .sl-order-detail .woocommerce-table--order-details tbody,
  .sl-order-detail table.order_details tbody,
  .sl-order-detail .woocommerce-table--order-details tfoot,
  .sl-order-detail table.order_details tfoot {
    display: block !important;
    width: 100% !important;
  }

  .sl-order-detail .woocommerce-table--order-details tr,
  .sl-order-detail table.order_details tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(199, 166, 92, 0.16) !important;
  }

  .sl-order-detail .woocommerce-table--order-details tfoot tr,
  .sl-order-detail table.order_details tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    border-bottom: none !important;
    padding: 10px 0 !important;
  }

  .sl-order-detail .woocommerce-table--order-details td,
  .sl-order-detail .woocommerce-table--order-details th,
  .sl-order-detail table.order_details td,
  .sl-order-detail table.order_details th {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    border: none !important;
    text-align: left !important;
  }

  .sl-order-detail .woocommerce-table--order-details .product-name,
  .sl-order-detail table.order_details .product-name {
    font-weight: 700 !important;
  }

  .sl-order-detail .woocommerce-table--order-details .product-name a,
  .sl-order-detail table.order_details .product-name a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .sl-order-detail .woocommerce-table--order-details .product-total,
  .sl-order-detail table.order_details .product-total {
    font-weight: 800 !important;
    color: var(--sl-maple-600, #7A1C1C) !important;
  }

  .sl-order-detail .woocommerce-table--order-details .product-quantity,
  .sl-order-detail table.order_details .product-quantity {
    font-weight: 700 !important;
    color: var(--sl-ink-600, #575249) !important;
  }

  .sl-order-detail .woocommerce-table--order-details tfoot tr:last-child th,
  .sl-order-detail table.order_details tfoot tr:last-child th,
  .sl-order-detail .woocommerce-table--order-details tfoot tr:last-child td,
  .sl-order-detail table.order_details tfoot tr:last-child td {
    font-size: 16px !important;
    font-weight: 850 !important;
    color: var(--sl-forest-900, #102615) !important;
  }

  .sl-order-detail .woocommerce-table--order-details tfoot th,
  .sl-order-detail table.order_details tfoot th,
  .sl-order-detail .woocommerce-table--order-details tfoot td,
  .sl-order-detail table.order_details tfoot td {
    border-bottom: none !important;
    padding: 2px 0 !important;
  }

  /* Customer details */
  .sl-order-detail .woocommerce-customer-details address,
  .sl-order-detail .woocommerce-column address {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Lightbox login: khong cho tran ra ngoai viewport */
@media (max-width: 549px) {
  .sl-account-lightbox {
    max-width: 94vw !important;
  }

  .sl-lb-grid,
  .sl-lb-side,
  .sl-lb-form {
    max-width: 100% !important;
    width: 100% !important;
  }
}